React-props的children属性

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

• 没有在子组件标签之间传递任何内容

  - 父组件: 
  <Son />- 子组件
  props.children // undefined
  

• 传递字符串

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

• 传递单个html元素

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

• 传递多个html元素

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

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

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

  <!-- 子组件 -->
  <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} )

  // 子组件
  function Card({ title, children }) {return (<div className="card"><h3>{title}</h3>{children} <!-- 相当于 Vue 的 <slot></slot> --></div>);
  }// 父组件使用
  <Card title="用户信息"><p>这是children内容</p><button>编辑</button>
  </Card>