React 组件的 children 数据使用

简介: 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
相关文章
|
21天前
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式,以纯函数的形式返回JSX,易于理解与维护,适用于简单的UI逻辑。类组件则是基于ES6类实现的,需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异,并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性,最后给出了相应的解决方法。通过学习,开发者可以根据具体需求选择合适的组件类型。
44 8
|
19天前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
97 2
|
6天前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件(HOC)是 React 中一种复用组件逻辑的方式,通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题,包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案,并提供了具体的 React 代码示例。通过本文,读者可以更好地理解和应用 HOC,提高代码的复用性和可维护性。
25 8
|
6天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
18天前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
13 1
|
24天前
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
35 3
|
2月前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
34 2
|
18天前
|
前端开发 JavaScript API
React将组件作为属性传递的最佳实践
本文探讨了在React中将组件作为属性传递的三种常见方式:作为元素传递、作为组件传递、作为函数传递。通过构建带图标的按钮组件,对比分析了每种方式的优缺点,最终推荐将组件作为函数传递,因为它提供了更好的可控性、灵活性和可扩展性。
25 0
|
19天前
|
JavaScript 前端开发 算法
写 React / Vue 项目时为什么要在列表组件中写 key
在React或Vue项目中,为列表组件中的每个元素添加唯一的key属性,有助于框架高效地更新和渲染列表。Key帮助虚拟DOM识别哪些项已更改、添加或删除,从而优化性能并减少不必要的重新渲染。
|
2月前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
55 0