props.children

React中props 是组件对外的接口，props作为父子组件沟通的桥梁，为组件的通信和传值提供了重要手段。

props对象的属性与组件的属性一一对应，但其中有一个比较特殊的参数就是props.children，它表示当前组件中所有的子节点。

在组件内部使用props.children，可以拿到在组件里面放置的内容，类似于Vue中的插槽功能。

props.children的使用

import React from 'react'
import First from './First.jsx'
export default function App() {
  return (
    <div>
      <h1>App组件</h1>
      <First info='app组件的数据'>
        <h3>First的子元素</h3>
      </First>
    </div>
  )
}


import {useEffect} from 'react'

export default function First(props) {
    useEffect(()=>{
        console.log(props,666666)
    },[])
  return (
    <div>
        <h2>First组件</h2>
        <p>{props.info}</p>
        {props.children}
    </div>
  )
}

上面代码的含义就是将一个 h3 标签在 App组件中作为First组件的子节点传入，可在First组件中通过 props.children获取 h3 标签这个子节点，所以在使用props属性传值时官方定义好的children不能作为属性名传入。

props.children除了传入原生的标签元素也可以传入组件

import React from 'react'
import First from './First.jsx'
import Des from './Des.jsx'
export default function App() {
  return (
    <div>
      <h1>App组件</h1>
      <First info='6ara'>
        <Des data='4ever'></Des>
      </First>
    </div>
  )
}

import {useEffect} from 'react'

export default function First(props) {
    useEffect(()=>{
        console.log(props,666666)
    },[])
  return (
    <div>
        <h2>First组件</h2>
        <p>{props.info}</p>
        {props.children}
    </div>
  )
}


import React from 'react'

export default function Des(props) {
  return (
    <div>
      <h1>Des组件</h1>
      <p>{props.data}</p>
    </div>
  )
}