React 组件的 children 数据使用

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