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

Question

嘿，我想将 ref 传入我的组件，这样我就可以访问所述 compenent like 状态上的变量。 唯一的问题是我似乎无法让它工作。它需要能够同时适用于类和函数

我从控制台收到的内容.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 元素的引用。所以，问题是你记录得太早了。

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

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

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

在 React 关于访问引用的文档中提供了更多信息：

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

const node = this.myRef.current;

ref 的值因节点类型而异：

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

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

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

最后一点是这里要注意的关键：React.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" />