React插槽

在开发中，我们抽取了一个组件，但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素。我们应该让使用者可以决定某一块区域到底存放什么内容。这里可以使用插槽。

而在React中，我们可以通过props.children给子组件传递一个或者多个组件，也就是利用props.children来传递组件或者内容 。

每个组件都可以获取到 props.children：它包含组件的开始标签和结束标签之间的内容。  

如果我们传入了一个组件，那么props.children就是我们传入的组件；

如果我们传入了多个组件，那么props.children就是我们传入的多个组件所组成的数组

实例

现在我们需要实现navbar, 要求左边, 中间, 右边的内容是不固定的, 由使用者来决定到底放什么

 

父组件：在父组件的子组件标签中写入要插入到子组件的元素。

import React, { Component } from 'react'
import NavBar from './c-cpns/NavBar'

export class App extends Component {
  render() {
    return (
      <div>
        {/* 父组件将要插入到子组件的元素写到组件标签中 */}
        <NavBar>
          <button>按钮</button>
          <h2>标题</h2>
          <i>斜体</i>
        </NavBar>
      </div>
    )
  }
}

export default App

可以复用的子组件：在子组件中通过this.props可以获取到一个children属性, 该属性中包含子组件标签开始到结束之间的内容。

import React, { Component } from 'react'
import './style.css'

export class NavBar extends Component {
  render() {
    // 在子组件通过props中的children, 获取到要插入的元素
    const { children } = this.props
    return (
      <div className='nav-bar'>
        <div className='left'>
          {children[0]}
        </div>
        <div className='center'>
          {children[1]}
        </div>
        <div className='right'>
          {children[2]}
        </div>
      </div>
    )
  }
}

export default NavBar

另外还可以通过props传递组件，这种方法也叫具名插槽。（上面的方法叫匿名插槽）

匿名插槽有一个弊端，就是必须通过索引获取对应组件，所以我们就必须按顺序传入组件

而匿名插槽中，直接使用对应的名字+解构赋值就能拿到对应的组件了，不会出错。。

参考https://www.jb51.net/article/263936.htm