可能會比較遺憾的說 React中并沒有vue中的 slot 插槽概念 不過 可以通過props.children 實現類似功能

我們先創建一個React項目
在src下創建目錄components 在下面創建一個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>元素結束</div>
        </div>
      )
    }
}

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

我們 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>這是插槽內容</div>
           </Dom>
        </div>
      )
    }
}

我們正常調用了剛才寫的dom組件 在中間插入了一個div 內容為 這是插槽內容
我們運行結果如下

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