React中的插槽

  • 官方文档

  • React中其实是没有插槽这个概念的,只不过我们之前学习Vue的时候,Vue中给我们内置了一个API那就是插槽(slot),React中的插槽与Vue中的插槽是十分类似的,同样是用于组件中的内容(DOM)拓展,代码复用等,我们可以再一个组件中引用另一个组件的时候给它的内部包入其他的内容(DOM)结构,这样我们就可以避免一些不必要的组件间的数据通信,总之就是一句话,提升代码的复用性

  • 实现原理其实同样是使用props

1. 默认插槽

  • 通过组件标签体传入结构，固定写法props.children
// 默认插槽
import React, { Component } from 'react'

// 子组件
class Son extends Component{
    render(){
        console.log('成功接收到父组件插入到子组件中的插槽数据:',this.props.children);
        return (
            <div>
                儿子组件
                {/* 子组件通过 this.props.children 来接收父组件传过来的内容并插入*/}
                {this.props.children}
            </div>
        )
    }
}

// 父组件
export default class Father extends Component {
  render() {
    return (
      <div>
        <Son>
            {/* 插槽的使用: */}
            <p>我是你爸爸!</p>
        </Son>
      </div>
    )
  }
}

结果展示:

image

2. 具名插槽

  • 通过标签属性props传入结构
// 具名插槽
import React, { Component } from 'react'

// 子组件
class Son extends Component{
    render(){
        console.log('成功接收到父组件插入到子组件中的插槽数据:',this.props.children);
        return (
            <div>
                儿子组件
                {/* 子组件通过 this.props.children 来接收父组件传过来的内容并插入*/}
                {/* 具名插槽可以随意通过后缀调换位置 */}
                {this.props.children[0]}
                {this.props.children[1]}
                {this.props.children[2]}
            </div>
        )
    }
}

// 父组件
export default class Father extends Component {
  render() {
    return (
      <div>
        <Son>
            {/* 插槽的使用: */}
            <p>111</p>
            <p>222</p>
            <p>333</p>
        </Son>
      </div>
    )
  }
}

结果展示:

image

React.Children内置的方法用于处理插槽数据

this.props.children 的值有三种可能：

  • 如果当前组件没有子节点，它就是 undefined ;
  • 如果有一个子节点，数据类型是 Object；
  • 如果有多个子节点，数据类型就是 Array。
  • 所以，处理 this.props.children 的时候要小心

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

import React, { Component } from 'react';
export default class App extends Component {
    render() {
        return <div>
            {/* 没有子节点 */}
            <Son></Son>
            
            {/* 字符串 */}
            <Son>Hello World</Son>
            
            {/* 一个子节点 */}
            <Son>
                <div>你好! React</div>
            </Son>
            
            {/* 多个子节点 */}
            <Son>
                <div>111</div>
                <div>222</div>
                <div>333</div>
            </Son>
        </div>
    }
}

class Son extends Component {
    render() {
        return <div>
            {console.log('成功获取到父组件的插槽数据',this.props.children)}
            {/* 使用React.Children.map来遍历数据并作数据处理 */}
            {React.Children.map(this.props.children, (el) => {
                return el
            })}
        </div>
    }
}
//console.log打印结果分别是
// undefined
// Hello World
// Object
// Array

结论

上面代码我们可以看出this.props.children既可以是对象，数组，undefined，那么按照平时处理数据的方式进行处理他的话，会显得很麻烦，那么我们就可以通过React官方提供的React.Children去进行处理，并且如果你想遍历它的话，可以通过React.Children.map去遍历它。