react - 加载主要组件后添加组件答案

【问题标题】：react - Add a component after main component has loadedreact - 加载主要组件后添加组件
【发布时间】：2022-01-26 06:18:17
【问题描述】：

我有一个这样的功能性反应组件：

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

现在我了解到，一旦加载了 ComponentA，就会加载 useEffect 下的所有内容。我想将 ComponentB 添加到 id 为 parent 的 div 中。请帮助我了解如何指定添加组件的位置。

附：我知道我可以通过document.getElementById("parent").append(ComponentB) 做到这一点，但我正在寻找其他方式。

【问题讨论】：

标签： javascript reactjs react-functional-component

【解决方案1】：

不，使用 React 时不要直接操作 DOM。

您需要有一个“标志”来指示您是否要渲染额外的组件。

类似

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

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

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

虽然我不确定您为什么要将ComponentB 延迟一个渲染周期。

就ComponentA 的getBoundingClientRect 而言，没有这样的东西，因为这取决于组件在DOM 中实际呈现的内容。 ComponentA 本身不是 DOM 的一部分。

在您的具体情况下，尽管您可以将ref 添加到#parent 元素并将其用于getBoundingClientRect，因为它是ComponentA 的“容器”元素

函数组件A(){ 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>
    </>
  );
}

【讨论】：

感谢您的及时答复。我想加载ComponentB，因为它的位置取决于parent。所以，除非它被渲染，否则我不确定我能找到组件的位置和大小。如果您有任何解决方案，请指导我。
另外，你知道如何获取组件A的ComponentA.getBoundingClientRect()吗？
@Sakaggi ComponentA 不是可以查询 DOM 属性的 DOM 元素。这取决于您在其中渲染的内容。但是您可以将ref 添加到#parent 元素并使用它来获取其边界矩形。用一些额外的代码更新了答案
我尝试过使用ref，但它给出了一个错误`TS2322: Type 'MutableRefObject' is notassignable to type 'LegacyRef |不明确的'。类型“MutableRefObject”不可分配给类型“RefObject”。属性“当前”的类型不兼容。类型“未定义”不可分配给类型“HTMLDivElement |空'。`
我能够通过使用const parentRef = useRef<HTMLDivElement>(null); 而不是const parentRef = useRef(); 来解决它

【解决方案2】：

尝试使用conditional rendering，如下所示：

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

【讨论】：

【解决方案3】：

您应该调用在渲染中返回组件的方法。我从您的回答中了解到，您不需要 useEffect。

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

【讨论】：

我想在componentA 被渲染后渲染componentB。
您在 ComponentA 的渲染函数中调用 AddComponentB 函数。所以，不渲染 ComponentA 就无法渲染。