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