Question

我的代码：


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上。现在通过目标道具传递给ChildComponent并使用它在孩子内部进行一些dom操作。

问题： 对于组件的第一个渲染，我得到 ParentReference 为 null 。（如果我在更改ParentReference时强制重新渲染，它将更新并重新渲染整个组件，那么它将具有价值。）

如何在子组件内部获取ParentReference进行初始渲染？

Answer 1

segFault对this answer的引用是正确的。您的ref直到组件的第一个渲染之后才初始化。因此，当渲染<ChildComponent target={ParentReference.current} />时，参考尚未定义。

在这种情况下，您可以考虑使用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>
)};

如何将由父组件的react钩子创建的引用传递给子组件？

1 个答案: