Question

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

我在这里转载了这个问题 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帮助我们将来自父对象的引用传递给功能子组件。

useImperativeHandle钩帮助我们将ref绑定到组件实例，我们仍然无法从子级中提取状态值，但是我们可以访问在子级中定义的函数，该函数将返回反正就是状态值。

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

通过引用访问该功能

查看有效的沙箱：https://codesandbox.io/s/dreamy-wiles-xst65

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

1 个答案: