javascript - 如何将 ref 附加到我使用 React.cloneElement 复制的组件

Question

嘿，我想通过这种方式将 ref 传递到我的组件中，我可以访问所述组件上的变量，例如状态。唯一的问题是我似乎无法让它工作。它需要能够为类和函数式工作

我从 console.log 收到的每次都是空的

  const testRef = createRef();
  console.log(testRef)
  const elementToCopy = singleScreenState.screen.peek().element;
  const Element = React.cloneElement(elementToCopy as ReactElement, { ...elementToCopy?.props, forwardRef: testRef })

Answer 1

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

我在下面有一个在函数组件中运行的示例，以演示在使用 useEffect 挂载相关元素后创建引用并记录它们。 .

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

要使用功能组件，您需要使用 forwardRef 在功能组件上作为其定义的一部分。转发的 ref 可以转到 useImperativeHandle 钩子(Hook)，或到另一个元素。

React's Documentation on Accessing Refs 中的更多信息:

When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.

const node = this.myRef.current;

The value of the ref differs depending on the type of the node:

• When the ref attribute is used on an HTML element, the ref created in the constructor with React.createRef() receives the underlying DOM element as its current property.

• When the ref attribute is used on a custom class component, the ref object receives the mounted instance of the component as its current.

• You may not use the ref attribute on function components because they don’t have instances.

最后一点是这里要注意的关键:React.ForwardRef 允许您赋予函数组件决定 ref 应该做什么的能力，因为否则 ref 无论如何都是没有意义的。

一般来说，在类组件中，如果你想通过它传递一个 ref，你通常必须用一个单独的 prop 名称来传递它。此处显示的方式之一: How to use React.forwardRef in a class based component?

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" />