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

嘿，我只想把ref传递到我的组件中，这样我就可以访问类似于compent状态的变量。唯一的问题是我似乎无法让它工作。它需要能够同时适用于类和函数

每次我从console.log接收到的内容都是null

const testRef=createRef（）；
console.log（testRef）
const elementToCopy=singleScreenState.screen.peek（）.element；
const Element=React.cloneElement（elementToCopy作为ReactElement，{…elementToCopy？.props，forwardRef:testRef}）

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

我在下面的一个函数组件中运行了一个示例，演示了在使用

useffect

装入相关元素后创建引用并记录它们

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

对于使用功能组件，您需要在功能组件上使用，作为其定义的一部分。转发的ref可以转到钩子，也可以转到另一个元素

更多信息请访问：

当ref传递给渲染中的元素时，将显示对节点的引用 在ref的当前属性处变得可访问

const node=this.myRef.current

ref的值因节点类型而异：


在HTML元素上使用ref属性时，使用React.createRef（）在构造函数中创建的ref将接收基础DOM
元素作为其当前属性

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

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


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

通常，在类组件中，如果您想通过它传递ref，通常必须使用单独的prop名称向下传递它。此处显示的方法之一：


const{useRef，useffect，useImperialiveHandle}=React；
const TestFunction=React.forwardRef（（props，ref）=>{
使用命令式句柄（参考，（）=>({
呼喊：（）=>console.log（“我在这里呼喊！”）
}));
返回TestFunction；
});
类TestComponent扩展了React.Component{
testFunct=（）=>{
log（“testFunct工作！”）；
};
render（）{
返回测试组件；
}
}
函数App（）{
const elementRef=useRef（）；
常量元素=测试；
const clonedElement=React.cloneElement（元素，{ref:elementRef}）；
const classRef=useRef（）；
常量classElement=；
const clonedClass=React.cloneElement（classElement，{ref:classRef}）；
const functionRef=useRef（）；
常量functionElement=；
const clonedFunction=React.cloneElement（functionElement{
ref:functionRef
});
useffect（（）=>{
log（'对元素的引用'，elementRef.current）；
//这会在堆栈溢出控制台中产生奇怪的输出。
//console.log（classRef.current）；
log（'classRef.current.testFunct'类组件引用中的函数'）；
classRef.current.testFunct（）；
log（'对功能组件的引用'，functionRef.current）；
functionRef.current.shout（）；
});
返回(
{clonedElement}
{clonedClass}
{克隆函数}
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);

如何将前向引用应用于克隆元素？假设函数组件没有附加引用，因此所有操作都需要在克隆上完成。如果您正在使用函数组件，则需要在函数组件上使用forward ref作为其定义的一部分。转发的ref可以转到
useimperativehandle
hook或另一个元素。更多信息请访问。类工作方式不同的原因是，默认情况下，ref指向类实例本身，但这对函数组件没有意义，因为它们没有相同的实例。是否可以检查克隆元素何时发生了更改？也就是说，如果我们克隆一个元素，呈现所述元素，该元素执行异步调用，然后更改组件的外观或内部的值，跟踪该更改的可能方法是什么？如果存在您希望父级能够了解的注释更改，则在组件调用的组件定义中添加onChange属性。然后在克隆中，您可以将onChange属性添加到ref中。除此之外，没有真正简单的方法来跟踪更改。所有数据在react中沿树向下流动，数据返回的唯一方法是使用回调函数。嗯，您认为可以在克隆时添加一个UseImperial，以某种方式监视组件并在更改时触发它吗？问题是试图允许任何人添加任何组件，我会默默地为他们处理所有这些。所以我只是想用一种干扰最小的方式来观察组件的变化，希望客户甚至不知道它是在后台发生的