(React入门)React中的插槽

注意：react中其实是没有插槽这个概念的

1. 默认插槽：通过组件标签体传入结构，固定写法props.children
2. 具名插槽：通过标签属性props传入结构

默认插槽

这里使用的是函数式组件写法

//子组件
function Son(props) {
    return <div>{props.children}</div>
}
//父组件
function App(props) {
    return (
        <div>
            <Son>
                <span>Hello World</span>
            </Son>
        </div>
    )
}
//结果
<div>
    <div>
        <span>Hello World</span>
    </div>
</div>

具名插槽

这里使用的是类组件写法

import React, { Component } from 'react';
export default class App extends Component {
    render() {
        return <>
            <Son
                left={<div>back</div>}
                right={<div>next</div>}
            >
            </Son>
        </>
    }
}

class Son extends Component {
    state = { name: 'fang' }
    render() {
        return <>
            <div>{this.props.left}</div>
            <div>{this.props.right}</div>
        </>
    }
}

React.Children.map

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 <>
            {/* 没有子节点 */}
            <Son></Son>
            {/* 字符串 */}
            <Son>Hello World</Son>
            {/* 一个子节点 */}
            <Son>
                <div>Hello React</div>
            </Son>
            {/* 多个子节点 */}
            <Son>
                <div>apple</div>
                <div>orange</div>
                <div>banana</div>
            </Son>
        </>
    }
}

class Son extends Component {
    state = { name: 'fang' }
    render() {
        return <>
            {console.log(this.props.children)}
            {/* {this.props.children} */}
            {React.Children.map(this.props.children, (el) => {
                return el
            })}
        </>
    }
}
//console.log打印结果分别是
// undefined
// Hello World
// Object
// Array

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

---