Tengo un componente de reacción funcional como este:
function ComponentA(){ function AddComponentB(){ return <><ComponentB /></> } useEffect(() => { AddComponentB(); }, []); return <> <div id="parent"></div> </> } Ahora he entendido que todo bajo useEffect se carga una vez que se carga el ComponentA . Quiero agregar el ComponentB a div con id parent . Por favor, ayúdame a entender cómo especifico dónde agregar el componente.
PD Sé que puedo hacerlo mediante document.getElementById("parent").append(ComponentB) pero estoy buscando otras formas.
No, no manipulas el DOM directamente cuando usas React.
Debe tener una "bandera" que dicte si desea renderizar el componente adicional o no.
Algo como
function ComponentA(){ const [renderComponentB, setRenderComponentB] = useState(false); useEffect(() => { setRenderComponentB(true); }, []); return ( <> <div id="parent"> {renderComponentB && <ComponentB/>} </div> </> ); } Aunque no estoy seguro de por qué desea retrasar el ComponentB por solo un ciclo de renderizado.
En cuanto al getBoundingClientRect de ComponentA , no existe tal cosa, ya que eso depende de lo que el componente represente realmente en el DOM. ComponentA en sí mismo no es parte del DOM.
En su caso específico, aunque podría agregar una ref al elemento #parent y usarlo para getBoundingClientRect , ya que es su elemento "contenedor" del ComponentA
function ComponentA(){ const [renderComponentB, setRenderComponentB] = useState(false); const parentRef = useRef();
useEffect(() => { setRenderComponentB(true); }, []); useLayoutEffect(() => { const rect = parentRef.current.getBoundingClientRect(); // do what you want with the rect here // if you want to apply values to the ComponentB // add them to a state variable and use those when // rendering the ComponentB }, []) return ( <> <div id="parent" ref={parentRef}> {renderComponentB && <ComponentB/>} </div> </> ); }Intente usar conditional rendering , como a continuación:
export default function ComponentA() { const [renderComponentB, setRenderComponentB] = useState(false) useEffect(() => { setRenderComponentB(true); }, []); return(<div id="parent"> {renderComponentB && <ComponentB/>} </div>) }Debe llamar al método que devuelve el componente en render. No necesita useEffect como entendí de su respuesta.
function ComponentA(){ function AddComponentB(){ return <><ComponentB /></> } return <> <div id="parent"> {AddComponentB()} </div> </> }