主页 / coding / 问题 / 78611960
Accepted
suyog
Asked: 2024-06-12 18:08:04 +0800 CST

一旦分配了 useRef 变量，如何在 useEffect 中使用它，并且不能在 useEffect 中使用 forwardRef 中的 ref

  • 772

这是我的代码

import { useEffect, useRef, useState } from "react";
import PostContainer from "./postContainer.jsx"

export function App(props) {
  const postContainerRef=useRef()
  useEffect(()=>{
    console.log(postContainerRef.current)
  },[postContainerRef])
  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <PostContainer 
      ref={postContainerRef}
      some_prop={"meow"} />
    </div>
  );
}

在这里我想使用它，postContainerRef一旦它被设置了，但它只是记录未定义。我尝试使用它[postContainerRef.current]作为依赖项数组，但它也没有做任何事情。

import { useState, useEffect, useRef, forwardRef } from "react";

const PostContainer = forwardRef((props, ref) => {
    useEffect(()=>{
      console.log(ref.current)
    },[ref])
    return <>
    <div>This is Container</div>
    </>
})

export default PostContainer

我还想在容器元素被渲染后访问它，但它也记录未定义。

Playcode 游乐场

javascript

1 个回答

  1. Best Answer

    useRef您面临的问题与和forwardRef的协同工作有关useEffect。以下是需要解决的关键点：

    1 -useRef对象 ( postContainerRef) 在其属性更新时不会触发重新渲染current。因此，它不会作为 中的依赖项发挥作用useEffect。

    2 - 使用 forwardRef 时，应将 ref 传递给要引用的实际 DOM 元素。以下是代码的修订版本，以确保正确设置了 ref 并可在 useEffect 中使用：

    应用程序组件

    import { useEffect, useRef } from "react";
import PostContainer from "./PostContainer";

export function App(props) {
  const postContainerRef = useRef(null);

  useEffect(() => {
    if (postContainerRef.current) {
      console.log(postContainerRef.current);
      // You can now use postContainerRef.current here
    }
  }, []);

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <PostContainer ref={postContainerRef} some_prop={"meow"} />
    </div>
  );
}

    PostContainer 组件

    import { useEffect, forwardRef } from "react";

const PostContainer = forwardRef((props, ref) => {
  useEffect(() => {
    if (ref.current) {
      console.log(ref.current);
      // You can now use ref.current here
    }
  }, [ref]);

  return (
    <div ref={ref}>
      This is Container
    </div>
  );
});

export default PostContainer;

    解释

    1-应用程序组件：

    • useRef(null)用于创建一个 ref 对象。
    • useEffect在初始渲染后运行一次。由于届时将分配 ref，因此您可以安全地postContainerRef在此效果中访问 .current。

    2-PostContainer 组件：

    • forwardRef用于传递ref给实际的 DOM 元素（div在本例中）。
    • useEffect用于ref.current在组件挂载后进行记录。这里，ref是从父组件传递下来的， 则ref分配给div元素。

    这样，就ref正确地分配给了 DOM 元素，并且您可以useEffect在父组件和子组件的钩子中使用它。

    • 1

相关问题