快捷導(dǎo)航

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

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

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

背景

在開發(fā)一個需求時，需要對原來的 form 表單組件代碼復(fù)用并進行拓展。
場景A 使用原來的 form 表單組件。
場景B 在原來的表單組件基礎(chǔ)上，新增一些表單項，新增表單項位置動態(tài)插入在原來的表單組件中，位置隨意。

需求

復(fù)用表單組件，同時支持新增表單項。

解決方案

在 React 中，組件擴展和定制的能力，可以通過 props.children 和 render props 來實現(xiàn)。

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

props.children

props.children 直接將內(nèi)容作為一個HTML內(nèi)嵌結(jié)構(gòu)編寫，將組件參數(shù)與內(nèi)嵌結(jié)構(gòu)分開寫。
children 可以是一個字符串，數(shù)組，對象等類型。可以使用 React.Children 的方法來判斷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

通過 props 參數(shù)傳入 JSX 元素的方法渲染，告知組件需要渲染什么內(nèi)容的函數(shù) prop?？梢远x多個 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 沒有專門的插槽，根據(jù) children/props 的特性，加上只讀屬性 dataset 實現(xiàn)一個類似的插槽功能。

非必要不使用，代碼會更加繁瑣。
如果有條件判斷是否展示，可以靈活設(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實現(xiàn)插槽slot功能的文章就介紹到這了,更多相關(guān)react插槽slot內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: