如何使用ReactJs操作组件的子组件？

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: '' };
  }

  handleChange = (event) => {
    this.setState({ data: event.target.value });
  }

  render() {
    return (
      <div>
        <ChildComponent value={this.state.data} onChange={this.handleChange} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <input type="text" value={this.props.value} onChange={this.props.onChange} />;
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    this.childRef.current.focus(); // 调用子组件的focus方法
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Focus the input</button>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <input type="text" />;
  }
}

const MyContext = React.createContext();

class ParentComponent extends React.Component {
  state = { data: 'Hello World' };

  render() {
    return (
      <MyContext.Provider value={this.state.data}>
        <ChildComponent />
      </MyContext.Provider>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {data => <div>{data}</div>}
      </MyContext.Consumer>
    );
  }
}

function withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Logged: ${WrappedComponent.name} did mount.`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

const EnhancedComponent = withLogger(ChildComponent);