children属性表示该组件的子节点，只要组件内部有子节点，props就有该属性，是自动带上的，不需要开发者添加。children可以是普通文本、普通标签元素、函数、JSX…- 案例一：
普通文本
import React from "react"; function Sub ({ children }) { return ( <div> <div>子组件</div> { children } </div> ) } class App extends React.Component { render () { return ( <div> <Sub> 这是子组件的 children 内容 </Sub> </div> ) } } export default App
- 案例二：
函数
import React from "react"; function Sub ({ children }) { // 执行方法 children() return ( <div> <div>子组件</div> </div> ) } class App extends React.Component { render () { return ( <div> <Sub> { () => { console.log('这是子组件的 children 内容'); } } </Sub> </div> ) } } export default App
- 案例三：
普通元素标签
import React from "react"; function Sub ({ children }) { return ( <div> <div>子组件</div> { children } </div> ) } class App extends React.Component { render () { return ( <div> <Sub> { <div><p>Children 内容1</p><p>Children 内容2</p></div> } </Sub> </div> ) } } export default App
import React from "react"; function Sub ({ children }) { return ( <div> <div>子组件</div> { children } </div> ) } class App extends React.Component { render () { return ( <div> <Sub> <div>Children 内容1</div> <p>Children 内容2</p> </Sub> </div> ) } } export default App
import React from "react"; function Sub ({ children }) { return ( <div> <div>子组件</div> { children.map(child => child) } </div> ) } class App extends React.Component { render () { return ( <div> <Sub> <div>Children 内容1</div> <p>Children 内容2</p> </Sub> </div> ) } } export default App
