如何更新子组件的状态？

// 子组件
class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childState: props.initialState // 将父组件传递的状态存储在子组件的状态中
    };
  }

  updateChildState(newState) {
    this.setState({ childState: newState }); // 更新子组件的状态
  }

  render() {
    return (
      <div>
        <p>子组件状态: {this.state.childState}</p>
      </div>
    );
  }
}

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      parentState: '初始状态'
    };
  }

  updateChild() {
    const newState = '更新后的状态';
    this.childComponent.updateChildState(newState); // 调用子组件的更新函数，更新子组件的状态
  }

  render() {
    return (
      <div>
        <ChildComponent
          initialState={this.state.parentState}
          ref={(child) => { this.childComponent = child; }} // 通过ref获取子组件的引用
        />
        <button onClick={() => this.updateChild()}>更新子组件</button>
      </div>
    );
  }
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));