如何將 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" />