在 React Function 组件中创建与 React Class 组件中相同的 ref 功能

Question

我想在函数组件 ref 中创建与 class 组件 ref 中完全相同的行为。

举个例子：

const AnotherComponent = () => {
    const DoSomething () => console.log(something);
    return <div> There is a content </div>;
}

const MyComponent () => {
    let newRef = useRef();
    useEffect(() => {
        newRef.current.DoSomething();
    }, []);
    return <AnotherComponent ref={newRef} />;
}

我知道 forwardRef，但据我了解，它允许您将 ref 绑定到特定输入以获取其事件，但不能绑定到具有所有功能的整个组件。

甚至可以用函数组件来实现这个吗？

Answer 1

是的，完全有可能。 React refs 不仅仅是为了访问 DOMNodes。使用 React.forwardRef 和 useImperativeHandle React hook 的组合将 React ref 转发给函数组件并公开 functions/values.

const AnotherComponent = React.forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    doSomething
  }));
  const doSomething () => console.log(something);
  return <div> There is a content </div>;
});

...

const MyComponent () => {
  const newRef = useRef();
  useEffect(() => {
    newRef.current.doSomething();
  }, []);
  return <AnotherComponent ref={newRef} />;
}

Forwarding refs

forwardRef

useImperativeHandle

在 React Function 组件中创建与 React Class 组件中相同的 ref 功能

Create the same ref functionality in React Function component as in React Class component

javascript

reactjs

react-ref

react-hooks

use-ref