11-react使用props.children 处理父子组件之间的传值

// props.children 组件传值
import { Component } from "react"
import reactDom from "react-dom"
// 床架一个 createRef 函数 用来创建 ref 对象

const Hello = (props) => {
 console.log(props)
 props.children('子组件传给父组件的值')  // 就是子组件标签之间的内容
 // props.children("hello 内部的数据")
 return (<>
  {props.children}
 </>)
}

class App extends Component {
 render () {
  return (
   <>
    {/* <Hello>我是数据</Hello> */}
    {/* 当在组件标签之间写内容的时候 就要使用 props.chilren 接收数据了 and 数据可以是人一个格式 */}
    {/* 字符串 */}
    {/* <Hello>我是数据</Hello> */}
    {/* html数据格式 */}
    {/* <Hello>
     <h1>html数据格式</h1>
    </Hello> */}
    {/* 函数格式 */}
    <Hello>
     {
      (str) => {
       console.log('我被调用了呀！！！', str)
      }
     }
    </Hello>
   </>
  )
 }
}

reactDom.render(<App />, document.querySelector("#root"))

ps：props.children 就是子组件标签之间的内容，and 内容可以是任意的数据格式 ；

使用场景：复用组件内容 ；