将ref传递给组件

import React, { useRef } from 'react';

const MyComponent = React.forwardRef((props, ref) => {
  // 使用useRef创建一个ref对象
  const inputRef = useRef();

  // 在组件内部使用ref对象
  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
});

const App = () => {
  // 创建一个ref对象
  const myComponentRef = useRef();

  // 在父组件中使用ref对象
  const handleClick = () => {
    myComponentRef.current.handleClick();
  };

  return (
    <div>
      <MyComponent ref={myComponentRef} />
      <button onClick={handleClick}>Click Child Component</button>
    </div>
  );
};

import React, { useRef } from 'react';

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

  handleClick = () => {
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.handleClick}>Focus Input</button>
      </div>
    );
  }
}

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

  handleClick = () => {
    this.myComponentRef.current.handleClick();
  };

  render() {
    return (
      <div>
        <MyComponent ref={this.myComponentRef} />
        <button onClick={this.handleClick}>Click Child Component</button>
      </div>
    );
  }
}