学习React第六篇：使用Reacts props.children访问嵌套数据

最孤单的人

于 2020-10-27 21:22:11 发布

阅读量696

点赞数

分类专栏： # Reactjs 入门教程文章标签： React组件 props.children

本文链接：https://blog.youkuaiyun.com/qq_20613731/article/details/109320547

版权

Reactjs 入门教程专栏收录该内容

18 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文聚焦于React中的props.children属性，介绍如何在组件中访问和利用嵌套的数据或组件。通过示例代码解释props.children如何使我们能够在HTML按钮中包含文本和嵌套组件。了解这一基础对于提升React应用的构建能力至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

继编写将React组件用作其他组件的子组件

在构建React组件时，您可能需要访问标记的子属性。 this.props.children访问innerHTML或另一个组件的嵌套组件。

为了访问组件中的嵌套值或组件，可以使用props.children：

示例文件 State.js：

import React from 'react'

class PropsChildren extends React.Component {
    render() {
        return (
            <div>
                <h1> I <Heart /> React </h1>
                <Button> I <Heart /> React</Button>  {/* 嵌套的组件*/}
            </div>
        )
    }
}

// 创建 按钮的无状态功能组件
const Button = (props) => <button> {props.children} </button>

class Heart extends React.Component {
    render() {