在react中更改子对象的状态

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childObject: {
        name: "John",
        age: 25
      }
    };
  }

  render() {
    return <ChildComponent childObject={this.state.childObject} />;
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childObject: props.childObject
    };
  }

  render() {
    // 使用子组件的本地状态来渲染子组件的内容
    return (
      <div>
        <p>Name: {this.state.childObject.name}</p>
        <p>Age: {this.state.childObject.age}</p>
        <button onClick={this.updateChildObject}>Update</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  // ...

  updateChildObject = () => {
    // 创建一个新的子对象，更改其状态
    const updatedChildObject = {
      ...this.state.childObject,
      age: this.state.childObject.age + 1
    };

    // 更新子组件的状态
    this.setState({ childObject: updatedChildObject });
  };

  render() {
    // ...
  }
}