可能會(huì)比較遺憾的說(shuō) React中并沒有vue中的 slot 插槽概念 不過(guò) 可以通過(guò)props.children 實(shí)現(xiàn)類似功能

我們先創(chuàng)建一個(gè)React項(xiàng)目

在src下創(chuàng)建目錄components 在下面創(chuàng)建一個(gè)dom.jsx組件

參考代碼如下

import React from "react"
export default class dom extends React.Component {
    constructor(props){
      super(props);
      this.state = {
      }
    }
    render(){
      return (
        <div>
           <div>這里是dom組件</div>
           <div>{ this.props.children }</div>
           <div>元素結(jié)束</div>
        </div>
      )
    }
}

這里 大家可以將this.props.children 理解為我們vue中的slot父組件插入的內(nèi)容就會(huì)放在這個(gè)位置

我們 App根組件編寫代碼如下

import React from "react"
import Dom from "./components/dom"
export default class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
      }
    }
    render(){
      return (
        <div>
           <Dom>
              <div>這是插槽內(nèi)容</div>
           </Dom>
        </div>
      )
    }
}

我們正常調(diào)用了剛才寫的dom組件 在中間插入了一個(gè)div 內(nèi)容為 這是插槽內(nèi)容

我們運(yùn)行結(jié)果如下

可以看到 我們的內(nèi)容被成功插入在了 this.props.children 的位置

知識(shí)補(bǔ)充

可能有小伙伴對(duì)于props.children并不太熟悉，下面小編為大家整理了props.children的相關(guān)知識(shí)，希望對(duì)大家有所幫助

簡(jiǎn)介

在典型的React數(shù)據(jù)流模型中，props 是組件對(duì)外的接口。props 作為父子組件溝通的橋梁，為組件的通信和傳值提供了重要手段。

this.props 對(duì)象的屬性與組件的屬性一一對(duì)應(yīng)，但其中有一個(gè)比較特殊的參數(shù)：this.props.children。它表示組件所有的子節(jié)點(diǎn)。

在組件內(nèi)部使用 this.props.children，可以拿到用戶在組件里面放置的內(nèi)容。

如下例，一個(gè) span 標(biāo)簽在 Parent 中作為Child的子節(jié)點(diǎn)傳入，可在 Child 中通過(guò) this.props.children 取到：

class Parent extends React.Component {
  render() {
    return (
    <Child>
        <span>{'child node'}</span>
      </Child>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

React.Children 方法

React 提供了工具方法 React.Children 來(lái)處理 this.props.children。

1. React.Children.map

object React.Children.map(object children, function fn)

遍歷 props.children ，在每一個(gè)子節(jié)點(diǎn)上調(diào)用 fn 函數(shù)。

2. React.Children.forEach

React.Children.forEach(object children, function fn)

類似于 React.Children.map()，但是不返回對(duì)象。

3. React.Children.count

number React.Children.count(object children)

返回 children 當(dāng)中的組件總數(shù)。

4. React.Children.only

object React.Children.only(object children)

返回 children 中僅有的子節(jié)點(diǎn)。如果在 props.children 傳入多個(gè)子節(jié)點(diǎn)，將會(huì)拋出異常。

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