javascript - react - Add a component after main component has loaded - Stack Overflow

admin管理员组

文章数量:1432001

I have a functional react ponent like this:

function ComponentA(){
 function AddComponentB(){
  return <><ComponentB /></>
 }
  useEffect(() => {
    AddComponentB();
  }, []);
 return 
  <>
   <div id="parent"></div>
  </>
}

Now I have understood that everything under useEffect is loaded once the ComponentA is loaded. I want to add the ComponentB to div with id parent. Please help me understand how do I specify where to add the ponent.

P.S. I know I can do it by document.getElementById("parent").append(ComponentB) but I am looking for other ways.

I have a functional react ponent like this:

function ComponentA(){
 function AddComponentB(){
  return <><ComponentB /></>
 }
  useEffect(() => {
    AddComponentB();
  }, []);
 return 
  <>
   <div id="parent"></div>
  </>
}

Now I have understood that everything under useEffect is loaded once the ComponentA is loaded. I want to add the ComponentB to div with id parent. Please help me understand how do I specify where to add the ponent.

P.S. I know I can do it by document.getElementById("parent").append(ComponentB) but I am looking for other ways.

• javascript
• reactjs
• react-functional-ponent

Share Improve this question Follow edited Dec 27, 2021 at 8:41 Sakaggi asked Dec 27, 2021 at 7:44 SakaggiSakaggi 9511 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

No, you do not manipulate the DOM directly when using React.

You need to have a "flag" that dictates if you want to render the extra ponent or not.

Something like

function ComponentA(){
  const [renderComponentB, setRenderComponentB] = useState(false);

  useEffect(() => {
    setRenderComponentB(true);
  }, []);

  return (
    <>
     <div id="parent">
       {renderComponentB && <ComponentB/>}
     </div>
    </>
  );
}

Although i am not sure why you want to delay the ComponentB for just one rendering cycle.

---

As far as the getBoundingClientRect of ComponentA, there is no such thing, as that depends on what the ponent actually renders in the DOM. ComponentA in it self is not part of the DOM.

In your specific case, though you could add a ref to the #parent element and use that for the getBoundingClientRect, since it is your "container" element of the 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>
    </>
  );
}

Try using conditional rendering, like below :

export default function ComponentA() {
  const [renderComponentB, setRenderComponentB] = useState(false)
  useEffect(() => {
    setRenderComponentB(true);
  }, []);
  return(<div id="parent">
    {renderComponentB && <ComponentB/>}
  </div>)
}

You should call method that returns ponent in render. You do not need useEffect as i understood from your answer.

function ComponentA(){
 function AddComponentB(){
  return <><ComponentB /></>
 }
 return 
  <>
   <div id="parent">
    {AddComponentB()}
   </div>
  </>
}

本文标签： javascriptreactAdd a component after main component has loadedStack Overflow