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

【问题标题】：Create the same ref functionality in React Function component as in React Class component在 React Function 组件中创建与 React Class 组件相同的 ref 功能
【发布时间】：2021-10-07 08:29:32
【问题描述】：

我想在函数组件引用中创建与类组件引用完全相同的行为。

这是一个例子：

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 绑定到特定输入以获取其事件，但不能绑定到具有所有功能的整个组件。

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

【问题讨论】：

标签： javascript reactjs react-hooks use-ref react-ref

【解决方案1】：

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

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

【讨论】：