詳解react實(shí)現(xiàn)插槽slot功能

更新時(shí)間：2025年09月21日 11:10:13 作者：樹(shù)上有只程序猿

本文主要介紹了詳解react實(shí)現(xiàn)插槽slot功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

背景

在開(kāi)發(fā)一個(gè)需求時(shí)，需要對(duì)原來(lái)的 form 表單組件代碼復(fù)用并進(jìn)行拓展。
場(chǎng)景A 使用原來(lái)的 form 表單組件。
場(chǎng)景B 在原來(lái)的表單組件基礎(chǔ)上，新增一些表單項(xiàng)，新增表單項(xiàng)位置動(dòng)態(tài)插入在原來(lái)的表單組件中，位置隨意。

需求

復(fù)用表單組件，同時(shí)支持新增表單項(xiàng)。

解決方案

在 React 中，組件擴(kuò)展和定制的能力，可以通過(guò) props.children 和 render props 來(lái)實(shí)現(xiàn)。

以上兩種方式的缺點(diǎn)是：如果插入位置比較分散，需要定義children對(duì)象或多個(gè) props，代碼繁瑣，不易維護(hù)。調(diào)研下來(lái)，目前貌似沒(méi)其他好的方法... 歡迎補(bǔ)充

props.children

props.children 直接將內(nèi)容作為一個(gè)HTML內(nèi)嵌結(jié)構(gòu)編寫(xiě)，將組件參數(shù)與內(nèi)嵌結(jié)構(gòu)分開(kāi)寫(xiě)。
children 可以是一個(gè)字符串，數(shù)組，對(duì)象等類型?？梢允褂?React.Children 的方法來(lái)判斷props.children 類型并處理。

function Father() {
    return (
        <div>
            我是父組件Father
            <Form1>
              <div>我是子組件Form1的children</div>
            </Form1>
            <Form2>
                {{
                    title: (<div>我是子組件Form2的title</div>),
                    content: (<div>我是子組件Form2的content</div>)
                }}
            </Form2>
        </div>
    )
}

function Form1(props) {
    return (
        <div>
            我是子組件Form1
            {props.children}
        </div>
    )
}

function Form2(props) {
    return (
        <div>
            我是子組件Form2
            {props.children.title}
            {props.children.content}
        </div>
    )
}

render props

通過(guò) props 參數(shù)傳入 JSX 元素的方法渲染，告知組件需要渲染什么內(nèi)容的函數(shù) prop?？梢远x多個(gè) props 參數(shù)，不同位置渲染不同的 props。

function Father() {
    return (
        <div>
            我是父組件Father
            <Form1
              children={<div>我是子組件Form1的children</div>}
            />
            <Form2
              title={<div>我是子組件Form2的title</div>}
              content={<div>我是子組件Form2的content</div>}
            />
        </div>
    )
}

function Form1(props) {
    return (
        <div>
            我是子組件Form1
            {props.children}
        </div>
    )
}

function Form2(props) {
    return (
        <div>
            我是子組件Form2
            {props.title}
            {props.content}
        </div>
    )
}

dataset

React 沒(méi)有專門的插槽，根據(jù) children/props 的特性，加上只讀屬性 dataset 實(shí)現(xiàn)一個(gè)類似的插槽功能。

非必要不使用，代碼會(huì)更加繁瑣。
如果有條件判斷是否展示，可以靈活設(shè)置 dataset 值使用。

function Father() {
  return (
    <div>
      我是父組件Father
      <Form1
        type='text1'
        title={<div>我是子組件Form的title</div>}
        bottom={<div>我是子組件Form的bottom</div>}
      >
        <div data-type='text1'>
          <label>性別：</label>
          <input type="text" name="gender" />
        </div>
        <div data-type='text1,text2'>
          <label>身高：</label>
          <input type="text" name="height" />
        </div>
        <div data-type='text2,text3'>
          <label>體重：</label>
          <input type="text" name="weight" />
        </div>
      </Form1>
    </div>
  )

到此這篇關(guān)于詳解react實(shí)現(xiàn)插槽slot功能的文章就介紹到這了,更多相關(guān)react插槽slot內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: