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'))