使用 useRef 钩子获取对 React 组件的引用

Question

useRef 返回的引用对象中的当前值始终为 null。

我在这里重现了这个问题 https://codesandbox.io/s/runtime-field-hmusg

我想获得对组件的引用 <MyComponent/>

Answer 1

forwardRef在处理功能组件时，您实际上需要使用该方法。此外，没有一种特别干净和简单的方法来检索功能子组件的状态值。但您可以这样做：

import React, { useRef, useState, useImperativeHandle } from "react";
import ReactDOM from "react-dom";

function App() {
  const referenceToMyComponent = useRef(null);

  return (
    <div className="App">
      <button
        onClick={() => {
          if (referenceToMyComponent.current) {
            console.log(referenceToMyComponent.current.returnStateValue());
          }
        }}
      >
        Print State reference
      </button>
      <MyComponent ref={referenceToMyComponent} />
    </div>
  );
}

const MyComponent = React.forwardRef((props, ref) => {
  const [count, setCount] = useState(0);

  const returnStateValue = () => {
    return count;
  };

  useImperativeHandle(ref, () => {
    return {
      returnStateValue: returnStateValue
    };
  });

  return (
    <div>
      <h4>Counter: {count}</h4>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
});

本质上，关键点是forwardRef，useImperativeHandle和returnStateValue。

将forwardRef帮助我们通过从父来的功能子成分的Ref。

该useImperativeHandle钩有助于我们绑定ref到组件的情况下，我们仍然不能提取从孩子的状态值，但我们可以访问会返回反正状态值的孩子定义的功能。

该returnStateValue函数只是从子组件内部返回状态。我们现在可以使用我们的 ref 访问该函数referenceToMyComponent.current.returnStateValue()

查看工作沙箱：https : //codesandbox.io/s/dreamy-wiles-xst65