React 组件的 children 数据使用

• children 属性表示该组件的子节点，只要组件内部有子节点，props 就有该属性，是自动带上的，不需要开发者添加。

• children 可以是 普通文本、普通标签元素、函数、JSX …

• 案例一：普通文本

  

  import React from "react";
  
  function Sub ({ children }) {
    return (
      <div>
        <div>子组件</div>
        { children }
      </div>
    )
  }
  
  class App extends React.Component {
    render () {
      return (
        <div>
          <Sub>
            这是子组件的 children 内容
          </Sub>
        </div>
      )
    }
  }
  
  export default App
  

• 案例二：函数

  

  import React from "react";
  
  function Sub ({ children }) {
    // 执行方法
    children()
    return (
      <div>
        <div>子组件</div>
      </div>
    )
  }
  
  class App extends React.Component {
    render () {
      return (
        <div>
          <Sub>
            { () => { console.log('这是子组件的 children 内容'); } }
          </Sub>
        </div>
      )
    }
  }
  
  export default App
  

• 案例三：普通元素标签

  

  import React from "react";
  
  function Sub ({ children }) {
    return (
      <div>
        <div>子组件</div>
        { children }
      </div>
    )
  }
  
  class App extends React.Component {
    render () {
      return (
        <div>
          <Sub>
            { <div><p>Children 内容1</p><p>Children 内容2</p></div> }
          </Sub>
        </div>
      )
    }
  }
  
  export default App
  

  import React from "react";
  
  function Sub ({ children }) {
    return (
      <div>
        <div>子组件</div>
        { children }
      </div>
    )
  }
  
  class App extends React.Component {
    render () {
      return (
        <div>
          <Sub>
            <div>Children 内容1</div>
            <p>Children 内容2</p>
          </Sub>
        </div>
      )
    }
  }
  
  export default App
  

  import React from "react";
  
  function Sub ({ children }) {
    return (
      <div>
        <div>子组件</div>
        { children.map(child => child) }
      </div>
    )
  }
  
  class App extends React.Component {
    render () {
      return (
        <div>
          <Sub>
            <div>Children 内容1</div>
            <p>Children 内容2</p>
          </Sub>
        </div>
      )
    }
  }
  
  export default App