React子组件向父组件传值及代码修正，求state相关文档

子组件（Child.js） #

import React, { Component } from 'react';

export default class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.clickFunction = this.clickFunction.bind(this);
  }

  clickFunction() {
    // 函数式更新state，确保基于最新状态计算
    this.setState(prevState => ({
      count: prevState.count + 1
    }), () => {
      // state更新完成后，通知父组件最新数值
      this.props.onCountChange(this.state.count);
    });
  }

  render() {
    return (
      <div>
        <div onClick={this.clickFunction} className="my-class">PressMe</div>
        {this.props.children}
      </div>
    );
  }
}

父组件（Parent.js） #

import React, { Component } from 'react';
import Child from './Child';

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleCountChange = this.handleCountChange.bind(this);
  }

  handleCountChange(childCount) {
    this.setState({
      count: childCount
    });
  }

  render() {
    return (
      <Child onCountChange={this.handleCountChange}>
        <p>Count: {this.state.count}!</p>
      </Child>
    );
  }
}

State的用途 #

State是组件内部的可变数据容器，专门用来存储组件需要动态维护的信息，比如用户输入内容、计数器数值、UI的显示/隐藏状态等。当state发生变化时，React会自动重新渲染组件，保证UI和数据同步。

这些组件中State的正确设置方式 #

1. 子组件的State：

   • 子组件自身维护点击计数器，所以把count放在子组件的state里。
   • 必须用setState()方法修改state，绝对不能直接赋值（比如this.state.count +=1），因为React无法检测这种直接修改，不会触发组件重渲染。
   • 用函数式更新（prevState => ({})）可以确保每次更新都基于最新的state值，避免异步更新带来的逻辑错误。

2. 父组件的State：

   • 父组件需要展示子组件的计数器值，所以通过子组件传递的回调函数（onCountChange）接收最新数值，更新自己的state。
   • 父子组件之间的状态同步，通过props传递回调函数是标准做法，之前代码里把state值当作ref使用是错误的——ref是用来获取组件实例的，不是用来传值的。

State使用的关键注意事项 #

• 只有类组件或使用useState钩子的函数组件能定义state。
• 不要在render方法里修改state，会导致无限循环重渲染。
• setState是异步操作，如果需要在state更新后执行逻辑，要放在它的第二个回调参数里（比如子组件中通知父组件的逻辑）。

内容的提问来源于stack exchange，提问作者tetelevm