如何将 parent 组件的 react hook 创建的引用传递给 child 组件?
How to pass a reference created by react hook of parent component to child components?
我的代码:
const MyComponent: React.FC = () => {
const ParentReference = useRef(null);
return(
<Parent className="d-flex flex-row" ref={ParentReference}>
<ChildComponent
className="mr-3"
target={ParentReference.current}
/>
<AnotherChild className="mr-3" />
</Nav>
)};
如上面的代码所示,我使用 useRef 挂钩创建了一个引用并将其附加到我的 ParentComponent。
现在我通过 target 道具传递给 ChildComponent 并使用它在 child.
中做一些 dom 操作
问题:
对于组件的第一次渲染,我得到 ParentReference 作为 null。 (如果我强制 re-render 更改 ParentReference 它将更新并且 re-render 整个组件然后它将有价值。)
如何在我的 child 组件中获取 ParentReference 以进行初始渲染?
segFault 对 的引用是正确的。您的 ref 直到 在 您的组件第一次渲染后才初始化。因此,当您呈现 <ChildComponent target={ParentReference.current} />
时,ref 尚未定义。
在这种情况下,您可以考虑使用 useEffect
在首次渲染时设置状态变量,并在设置状态变量后有条件地渲染 <ChildComponent />
。
const MyComponent: React.FC = () => {
const ParentReference = useRef(null);
// define state variable defining the ref as not yet ready
const [refReady, setRefReady] = useState(false)
// On first mount, set the variable to true, as the ref is now available
useEffect( () => {
setRefReady(true)
}, [])
return(
<Parent className="d-flex flex-row" ref={ParentReference}>
{refReady && <ChildComponent
className="mr-3"
target={ParentReference.current}
/>}
<AnotherChild className="mr-3" />
</Nav>
)};
我的代码:
const MyComponent: React.FC = () => {
const ParentReference = useRef(null);
return(
<Parent className="d-flex flex-row" ref={ParentReference}>
<ChildComponent
className="mr-3"
target={ParentReference.current}
/>
<AnotherChild className="mr-3" />
</Nav>
)};
如上面的代码所示,我使用 useRef 挂钩创建了一个引用并将其附加到我的 ParentComponent。 现在我通过 target 道具传递给 ChildComponent 并使用它在 child.
中做一些 dom 操作问题: 对于组件的第一次渲染,我得到 ParentReference 作为 null。 (如果我强制 re-render 更改 ParentReference 它将更新并且 re-render 整个组件然后它将有价值。)
如何在我的 child 组件中获取 ParentReference 以进行初始渲染?
segFault 对 <ChildComponent target={ParentReference.current} />
时,ref 尚未定义。
在这种情况下,您可以考虑使用 useEffect
在首次渲染时设置状态变量,并在设置状态变量后有条件地渲染 <ChildComponent />
。
const MyComponent: React.FC = () => {
const ParentReference = useRef(null);
// define state variable defining the ref as not yet ready
const [refReady, setRefReady] = useState(false)
// On first mount, set the variable to true, as the ref is now available
useEffect( () => {
setRefReady(true)
}, [])
return(
<Parent className="d-flex flex-row" ref={ParentReference}>
{refReady && <ChildComponent
className="mr-3"
target={ParentReference.current}
/>}
<AnotherChild className="mr-3" />
</Nav>
)};