如何解决如果父组件没有传递引用,您是否允许为元素分配引用?
function Parent() {
const reusableComponentRef = useRef(null);
return (
<ChildComponent ref={reusableComponentRef}/>
<ChildComponent2/>
)
}
interface ChildComponentProps {
ref: RefObject<HTMLElement>
}
function ChildComponent({ref}: ChildComponentProps) {
return (
<ReusableComponent ref={ref}/>
)
}
function ChildComponent2() {
return (
<ReusableComponent/>
)
}
interface ReusableComponentProps {
ref?: RefObject<HTMLElement>
}
function ReusableComponent({ref}: ReusableComponentProps) {
return (
// am I still allowed to assign a ref to this div?
// even though there will be cases where a ref isn't passed by the parent?
<div ref={ref}>
<div>
Some Text
</div>
</div>
)
}
假设我的代码结构如下所示。我有一个父容器组件,它返回两个都使用 ReusableComponent 的子组件。只有其中一个需要将 ref 传递给 ReusableComponent,并且在 props 中我将 ref 设置为可选参数。
我的问题是,即使代码库中存在 ReusableComponent 不会从其父级收到 ref 的情况,将 ref 分配给 ReusableComponent 中的 <div></div>
是否有效?我正在处理现有代码 (ReusableComponent),因此更改 ReusableComponent 的所有实例以传递 ref 是不可行的。
我必须做这样的事情吗?
function ReusableComponent({ref}: ReusableComponentProps) {
const defaultRef = useRef(null);
const usedRef = (ref === null)? defaultRef : ref;
return (
<div ref={usedRef}>
<div>
Some Text
</div>
</div>
)
}
解决方法
将引用分配给 ReusableComponent 中的引用是否有效,即使代码库中存在 ReusableComponent 不会从其父级接收引用的情况?
是的。在这种情况下,ref
将是未定义的,执行 <div ref={undefined}>
是完全安全的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。