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

Question

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

我每次从 console.log 收到的是 null

 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 元素的引用。 所以，问题是你登录得太早了。

我有一个在 function 组件中运行的示例，以演示在使用useEffect安装相关元素后创建引用并记录它们。

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

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

React 的有关访问 Refs 的文档中的更多信息：

当 ref 被传递给 render 中的元素时，对节点的引用可以在 ref 的当前属性处访问。

const node = this.myRef.current;

ref 的值因节点的类型而异：

• 当在 HTML 元素上使用 ref 属性时，使用 React.createRef() 在构造函数中创建的 ref 接收底层 DOM 元素作为其当前属性。

• 当 ref 属性用于自定义 class 组件时，ref object 接收组件的已安装实例作为其当前实例。

• 您不能在 function 组件上使用 ref 属性，因为它们没有实例。

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

通常在 class 组件中，如果你想通过它传递一个 ref，你通常必须用一个单独的 prop 名称传递它。 此处显示的方法之一：如何在基于 class 的组件中使用 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" />