React-props的children属性

乖女子@@@2025-09-29 14:25

在 React 中，子组件标签之间的内容（无论是文本、HTML 元素还是其他 React 组件）不会直接显示在页面上，而是会被收集到子组件的 props.children 属性中；

没有在子组件标签之间传递任何内容
javascript 复制代码
```
- 父组件: 
<Son />

- 子组件
props.children // undefined
```

传递字符串

javascript 复制代码

- 父组件
  <Son>Hello World</Son>
- 子组件
  props.children // 'Hello World'

传递单个html元素

javascript 复制代码

- 父组件
  <Son><div>Hello World</div></Son>
- 子组件
  props.children // vnode

传递多个html元素

javascript 复制代码

- 父组件
 <Son>
   <header>头部</header>
   <footer>尾部</footer>
 </Son>
- 子组件
 props.children // [vnode, vnode]

使用：其实props.children属性和vue中的默认插槽有点像

vue中：在子组件中使用slot占位将（父组件中）子组件标签间内容渲染到slot位置；

javascript 复制代码

<!-- 子组件 -->
<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <slot></slot> <!-- 相当于 React 的 {props.children} -->
  </div>
</template>  

<!-- 父组件使用 -->
<Card title="用户信息">
  <p>这是插槽内容</p>
  <button>编辑</button>
</Card>

React中：将（父组件中）子组件标签间的内容添加在子组件props.children中，在子组件中想要使用的位置使用即可( {children} )

javascript 复制代码

// 子组件
function Card({ title, children }) {
 return (
   <div className="card">
     <h3>{title}</h3>
     {children} <!-- 相当于 Vue 的 <slot></slot> -->
   </div>
 );
}

// 父组件使用
<Card title="用户信息">
 <p>这是children内容</p>
 <button>编辑</button>
</Card>