React中的插槽

一、react插槽

1.1 代码演示

使用this.props.children。
新建children.js组件，写入：

import React, { Component } from 'react'

class Child extends Component {
    render() {
        return (
            <div>
                children
                {this.props.children[0]}
                {this.props.children[1]}
                {this.props.children[2]}

            </div>
        )
    }
}

export default class Children extends Component {
  render() {
    return (
      <div>
          <Child>
              <div>11111</div>
              <div>22222</div>
              <div>33333</div>

          </Child>
      </div>
    )
  }
}

效果：

---

1.2 插槽好处

为了复用，一定程度减少父子通信。
例如之前点击显示隐藏的功能，代码修改如下：

import React, { Component } from 'react'

class Navbar extends Component {
  render() {
    return (
      <div style={{background: "red"}}>
          {this.props.children}
          <span>navbar</span>
      </div>
    )
  }
}

class Sidebar extends Component {
    render() {
      return (
        <div style={{background: "green", width: "100px"}}>
            <ul>
                <li>1111</li>
                <li>1111</li>
                <li>1111</li>
                <li>1111</li>
                <li>1111</li>
            </ul>
        </div>
      )
    }
  }

export default class Children extends Component {
  state = {
      isShow: false
  }  
  
  render() {
    return (
      <div>
          <Navbar>
              <button onClick={() => {
                  this.setState({
                      isShow: !this.state.isShow
                  })
              }}>click</button>
          </Navbar>
          {this.state.isShow && <Sidebar></Sidebar>}
      </div>
    )
  }
}

效果：

可以看到直接将按钮写在了子组件的插槽了，可以直接访问父组件的状态，设置隐藏显示，而不用通过父子通信，但是这个只能在一定程度上减少，不能把组件里所有的逻辑都写在插槽里，插槽的功能最大的用处还是在于复用。

在学习React的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。