Início / coding / Perguntas / 78611960
Accepted
suyog
Asked: 2024-06-12 18:08:04 +0800 CST

Como usar a variável useRef em useEffect depois de atribuída e não é possível usar ref de forwardRef em useEffect

  • 772

Este é o meu código

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

aqui eu quero usar postContainerRefuma vez definido, mas é apenas um registro indefinido. Tentei usar [postContainerRef.current]como matriz de dependência, mas também não fez nada.

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

Também quero acessar o elemento Container depois de renderizado, mas ele também está registrando indefinido.

Playcode playground

javascript

1 respostas

  1. Best Answer

    O problema que você está enfrentando está relacionado a como useReftrabalhar forwardRefem conjunto com o useEffect. Aqui estão os pontos principais a serem abordados:

    1 - O useRefobjeto ( postContainerRef) não aciona novas renderizações quando sua currentpropriedade é atualizada. Portanto, não funcionará como uma dependência no useEffect.

    2 - Ao usar forwardRef, você deve passar o ref para o elemento DOM real que deseja referenciar. Aqui está uma versão revisada do seu código para garantir que a referência esteja definida corretamente e possa ser usada em useEffect:

    Componente do aplicativo

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

    Componente 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;

    Explicação

    Componente 1-aplicativo:

    • useRef(null)é usado para criar um objeto ref.
    • useEffecté executado uma vez após a renderização inicial. Como a referência será atribuída até então, você poderá acessar com segurança postContainerRef. corrente dentro deste efeito.

    Componente 2-PostContainer:

    • forwardRefé usado para passar refpara o elemento DOM real ( divneste caso).
    • useEffecté usado para registrar ref.currentapós a montagem do componente. Aqui, refé transmitido do componente pai e refé atribuído ao divelemento.

    Dessa forma, o refé atribuído corretamente ao elemento DOM e você pode usá-lo em seus useEffectganchos tanto nos componentes pai quanto nos filhos.

    • 1

relate perguntas