在React中访问同级组件的refs

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

  getChildRef = (ref) => {
    this.childRef = ref;
  }

  render() {
    return (
      <div>
        <ChildComponent getRef={this.getChildRef} />
        <button onClick={() => this.childRef.focus()}>Focus Child Component</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = null;
  }

  componentDidMount() {
    this.props.getRef(this.inputRef);
  }

  render() {
    return (
      <input type="text" ref={(ref) => { this.inputRef = ref; }} />
    );
  }
}

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

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={() => this.childRef.current.focus()}>Focus Child Component</button>
      </div>
    );
  }
}

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

  render() {
    return (
      <input type="text" ref={this.inputRef} />
    );
  }
}