访问子组件在React中的引用

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

  handleClick() {
    // 通过ref获取子组件的引用
    console.log(this.childRef.current);
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick.bind(this)}>访问子组件</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <div>子组件</div>;
  }
}

function ParentComponent() {
  const childRef = React.useRef();

  const handleClick = () => {
    // 通过ref获取子组件的引用
    console.log(childRef.current);
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>访问子组件</button>
    </div>
  );
}

function ChildComponent() {
  return <div>子组件</div>;
}