React通过props的children实现插槽功能

可能会比较遗憾的说 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 的位置