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

我的代码：

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

常量MyComponent:React.FC=（）=>{
const ParentReference=useRef（null）；
返回(
)};

如上面代码所示，我使用useRef钩子创建了一个引用，并将其附加到我的ParentComponent。 现在，我通过目标道具将其传递给ChildComponent，并使用它在子级内部执行一些dom操作

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

如何在我的子组件中获取初始渲染本身的ParentReference？

segFault对的引用是正确的。直到组件第一次渲染之后，ref才会初始化。因此，在渲染

时，ref尚未定义

在此方案中，您可以考虑使用<代码> Uffice < /COD>在第一个呈现上设置状态变量，并在设置状态变量后有条件地呈现<代码> <代码>。< /P>

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）；
//定义状态变量，将ref定义为尚未就绪
const[refReady，setRefReady]=useState（false）
//在第一次装载时，将变量设置为true，因为ref现在可用
useffect（（）=>{
setRefReady（真）
}, [])
返回(
{refReady&&}
)};

这是否回答了您的问题？不，没有。他们提到的问题完全不同，因为在我的ref中，在传递给子组件之前，它被附加并初始化到父组件，所以我希望它有价值。我可以使用useEffect钩子并在ref值更改时触发重新渲染，这将再次重新渲染组件。但是我想在第一次渲染中使用。是的，您是正确的\n``const[，reRender]=useState（）；useffect（（）=>{reRender（{}）；}，[ParentReference]）；`我是这样做的，但我期待着如果我们能在第一次渲染中做些什么？？我不知道。使用React时，ref是一种反模式，因此您应该尝试确保确实需要使用ref，而不是从祖父母那里传递道具或管理状态。你在这里通过裁判想要达到什么目的？此外，如果此答案对您有所帮助，则习惯上会将其标记为答案和/或投票表决。每个人都喜欢无意义的互联网点。我在我的子组件中有一个覆盖层，我想根据我父母的组件来定位它。这听起来像是css可以做的事情。如果您发布更多的代码和/或创建一个工作示例（codesandbox或类似的东西），并在定位方面给出您想要完成的具体内容的更多细节，也许我们可以帮助您更好地理解它。