在安装相关元素之前，不会填充对React元素的引用。所以，问题是您登录得太早了。

我在下面的一个函数组件中运行了一个示例，演示了在使用useffect装入相关元素后创建引用并记录它们。

您可能遇到的另一个问题是，根据我看到的代码，您可能正在类组件的render函数中创建ref，这不会很好地工作，因为一旦实际呈现ref变量，您将无法访问它。通常，将ref变量保留为类的实例属性，以便在需要时可以访问它。

为了处理函数组件，您需要在函数组件上使用rendRef作为其定义的一部分。转发的ref可以转到useImperativeHandle钩子或另一个元素。

React文档中关于访问参考文献的更多信息：

当ref传递给呈现中的元素时，对该节点的引用在ref的当前属性处变得可访问。

const node=this。myRef。电流

ref的值因节点类型而异：

>

在自定义类组件上使用ref属性时，ref对象将组件的已装入实例作为其当前实例接收。

不能对函数组件使用ref属性，因为它们没有实例。

最后一点是这里需要注意的关键：反应。ForwardRef允许您赋予函数组件决定ref应该做什么的能力，因为否则ref将毫无意义。

通常，在类组件中，如果您想通过它传递ref，通常必须使用单独的prop名称向下传递它。这里显示的方法之一：如何使用React。基于类的组件中的forwardRef？

const { useRef, useEffect, useImperativeHandle } = React;

const TestFunction = React.forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    shout: () => console.log("I'm Yelling over here!")
  }));
  return <div>TestFunction</div>;
});

class TestComponent extends React.Component {
  testFunct = () => {
    console.log("testFunct works!");
  };
  render() {
    return <div>TestComponent</div>;
  }
}
function App() {
  const elementRef = useRef();
  const element = <div>Test</div>;
  const clonedElement = React.cloneElement(element, { ref: elementRef });
  const classRef = useRef();
  const classElement = <TestComponent />;
  const clonedClass = React.cloneElement(classElement, { ref: classRef });
  const functionRef = useRef();
  const functionElement = <TestFunction />;
  const clonedFunction = React.cloneElement(functionElement, {
    ref: functionRef
  });

  useEffect(() => {
    console.log('reference to an element',elementRef.current);
    // This produces weird output in the stack overflow console.
    // console.log(classRef.current);
    console.log('function from a reference to a class component', classRef.current.testFunct);
    classRef.current.testFunct();
    console.log('reference to a function component',functionRef.current);
    functionRef.current.shout();
  });
  return (
    <div className="App">
      {clonedElement}
      {clonedClass}
      {clonedFunction}
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="root" />