当前位置：首页 > article >正文

React 组件的 children 数据使用

article 2024/11/17 9:25:06

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