React 组件的 children 数据使用

最新推荐文章于 2024-07-26 13:27:18 发布

卡尔特斯

最新推荐文章于 2024-07-26 13:27:18 发布

阅读量1k

点赞数 3

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/zz00008888/article/details/129970119

版权

React 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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