如果父组件没有传递一个元素，是否允许为元素分配一个 ref？

Question

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>
    )
}

假设我的代码结构如下所示。我有一个父容器组件，其中 returns 两个子组件都使用 ReusableComponent。只有其中一个需要将 ref 传递给 ReusableComponent 并且在 props 中我已将 ref 设置为可选参数。

我的问题是，将 ref 分配给 ReusableComponent 中的 <div></div> 是否有效，即使代码库中存在 ReusableComponent 不会从其父级接收 ref 的情况？我正在处理现有代码 (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>
    )
}

Answer 1

would it be valid to assign the ref to the in ReusableComponent even though there will be cases in the codebase where ReusableComponent will not receive a ref from its parent?

是的。在这种情况下 ref 将是未定义的，并且执行 <div ref={undefined}> .

是完全安全的

如果父组件没有传递一个元素，是否允许为元素分配一个 ref？

Are you allowed to assign an element a ref if the parent component did not pass one?

javascript

typescript

reactjs

typescript-typings

react-ref