React 中 props 的 children 属性

children属性：表示组件标签的子节点。当组件标签有子节点时，props就会有该属性
children属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）

// children为文本节点
const App = (props) => {
    
    
	console.log(props)
	return (
		<div>
			<h1>组件标签的子节点：</h1>
              {
    
    props.children}
		</div>
      )
}

ReactDOM.render(<App>我是子节点</App>, document.getElementById('root'))

// children为JSX或组件
const App = (props) => {
    
    
     console.log(props)
     return (
         <div>
             <h1>组件标签的子节点：</h1>
             {
    
    props.children}
         </div>
     )
}
ReactDOM.render(<App><p>我是子节点，是一个p标签</p></App>, document.getElementById('root'))

// children为函数
const App = (props) => {
    
    
	console.log(props)
	return (
		<div>
			<h1>组件标签的子节点：</h1>
            {
    
    props.children()}
		</div>
     )
}
 
ReactDOM.render(<App>{
    
     () => console.log('这是一个函数子节点')}</App>, document.getElementById('root'))