props.children的使用

举个例子

class App extends Component {
    render() {
        return <p>return: {this.props.children}</p>
    }
}
render(<App>我是一个app组件<div>我是一个div标签</div></App>, document.getElementById('root'));

<div id="root"><p>return: 我是一个app组件<div>我是一个div标签</div></p></div>

你还可以为其传入参数，以控制内部标签

class App extends Component {
    render() {
        return this.props.children(true, false)
    }
}
render(<App>{(flagA, flagB) => flagA && flagB ? <div>flag为true</div> : <div>flag为false</div>}</App>,
    document.getElementById('root'));

<div id="root"><div>flag为false</div></div>

props.children 是一个数组

class App extends Component {
    render() {
        console.info(this.props.children)
        return <Fragment></Fragment>
    }
}
render(<App><div>我是一个div标签</div>{() => <p>as</p>}
{(flagA, flagB) => flagA && flagB ? <div>flag为true</div> : <div>flag为false</div>}
</App>, document.getElementById('root'));

(3) [{…}, ƒ, ƒ]
0: {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}
1: () => {…}
2: (flagA, flagB) => {…}