学习React第五篇：将React组件用作其他组件的子组件

最新推荐文章于 2023-07-10 07:42:59 发布

最孤单的人

最新推荐文章于 2023-07-10 07:42:59 发布

阅读量260

点赞数

分类专栏： # Reactjs 入门教程文章标签： React React子组件 props/state

本文链接：https://blog.csdn.net/qq_20613731/article/details/109303596

版权

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

18 篇文章 1 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

这篇博客探讨了React中组件的父子关系和可组合性。通过示例解释了如何使用无状态函数组件显示数据，并展示了一个父组件如何通过props更新其子组件的状态。文章强调了React组件能够作为其他组件的子组件这一核心特性。

摘要由CSDN通过智能技术生成

继编写使用setState管理React组件状态

owner-ownee的关系用于指定与React组件的父子关系，因为它不同于DOM关系。本篇演示了使用无状态函数显示数据时React的可组合性。

React的重要特征是React组件可以输出或渲染其他React组件。这里有一个非常简单的组件。

示例文件 State.js：

import React from 'react'

class State extends React.Component {
    //为了让我们开始使用状态，我将在这里设置一个构造函数方法
    constructor() {
        // 第一件事就是，将调用super。这将为关键字“ this”提供组件中的上下文，而不是其父类React.Component。
        super();

        this.state = {
            txt: "this is the state txt",
            cat: 0
        }
    }

    // 创建update()的方法，该方法将接收一个事件 e 来更新状态
    update(e) {
        this.setState({ txt: e.target.value })
    }

    rende