React 中 props 的 children 属性

深入理解children属性：React组件动态子节点的魔术

最新推荐文章于 2025-09-28 10:13:50 发布

原创最新推荐文章于 2025-09-28 10:13:50 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #开发语言

React 专栏收录该内容

9 篇文章

订阅专栏

本文解析React中children属性的灵活性，展示其如何接受并渲染文本、JSX元素、组件以及函数，通过实例演示了不同类型的子节点应用

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