React组件通信中的props的children属性

原创已于 2022-05-21 12:00:43 修改 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #javascript #前端

于 2022-05-21 11:58:37 首次发布

react.js 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了React组件中的children属性，展示了children可以接收不同类型的内容，如文本、标签元素、函数以及JSX表达式，并通过代码实例进行解析。通过学习，读者将能够更好地理解和运用children属性在React组件间传递数据。

children属性是表示该组件的子节点，只要组件内部有子节点，props中就有该属性

children可以是什么

普通文本

普通标签元素

函数

JSX

代码实例

1.普通文本

function SonA(props){
    return(
        <>
            <p>{props.children}</p>
        </>
    )



}


class App extends Component {
  
 
  render () {
    return (
      <div>
       
        <SonA>
          {/* props中的children属性 */}
          this is children
        </SonA>
       
      </div>
    )
  }
}

2.普通标签元素

function SonA(props){
    return(
        <>
           {props.children} 
        </>
    )



}


class App extends Component {
 
 
  render () {
    return (
      <div>
       
        <SonA>
          <p>this is p</p>
        </SonA>
       
      </div>
    )
  }
}

3.函数

function SonA(props){
    props.children()
    return(
        <>
        </>
    )



}


class App extends Component {
  
 
  render () {
    return (
      <div>
       
        <SonA>
          {()=>console.log("123")}
        </SonA>
       
      </div>
    )
  }
}

4.JSX

function SonA(props){
    return(
        <>
            {props.children}
        </>
    )



}


class App extends Component {
 
 
  render () {
    return (
      <div>
       
        <SonA>
          {<div><span>this is span</span></div>}
        </SonA>
       
      </div>
    )
  }
}