Children是顶层API之一;this.props.的对象属性和组件属性是一一对应的,但是有一个例外,this.props.children是组件所有的子节点
先看代码
class App extends Component{ render(){ return( <div> {this.props.children} </div> ) } } const Title = (props)=>(<p>我是一个类组件{props.children}</p>) ReactDOM.render(<App><p>hello</p><Title>title</Title></App>,document.querySelector('#root'))
都可以拿到值,如下所示
children可以是组件,也可以是文本节点,甚至可以传一个函数
传一个函数的写法如下:
class App extends Component{ render(){ return( <div> {this.props.children()} </div> ) } } ReactDOM.render(<App>{()=>{console.log('传了一个函数');}}</App>,document.querySelector('#root'))
效果如下: