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

继编写 使用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 })
    }

    render() {
        return (
            <div>
                <h1>{this.state.txt} - {this.state.cat}</h1>
                <Widget update={this.update.bind(this)} />
                <Widget update={this.update.bind(this)} />
                <Widget update={this.update.bind(this)} />
            </div>
        )
    }
}

// 创建一个新的组件(一个无状态功能组件) 称为小部件,
const Widget = (props) =>
    <input type="text" onChange={props.update} />

export default State

 

* 在页面上创建了三个这样的子组件,每次我们键入其中一个,它将更新父组件中的值:

 

示例参考:

React的入门基本基础知识 https://egghead.io/courses/start-learning-react

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页