动态反应控制子组件的渲染答案

【问题标题】：React control rendering of the child components dynamically动态反应控制子组件的渲染
【发布时间】：2023-01-20 16:07:22
【问题描述】：

我有一个父 React 组件，它有子组件在其中呈现。

<div id="parent">
    {<div style={{ visibility: isComp1 ? "visible" : "hidden" }}><MyComponent1 {...props}/></div>}
    {<div style={{ visibility: isComp2 ? "visible" : "hidden" }}><MyComponent2 {...props}/></div>}
    {<div style={{ visibility: isComp3 ? "visible" : "hidden" }}><MyComponent3 {...props}/></div>}
</div>

一次，只有一个组件会呈现在屏幕上，具体取决于对主要父页面 Link1/2/3 上链接的点击。我根据 isComp1/2/3 控制可见性

现在在这些子组件中，我有一些 API 调用。我只希望在单击相应链接（即 Link1/2/3）时触发这些 API 调用。但是，我观察到尽管默认情况下将可见性设置为“无”，但所有 3 个子组件都已呈现，并且所有子 API 调用都被触发。

我使用 visibility 属性做错了什么吗？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

您可以使用条件运算符来隐藏/显示相应的组件：

<div id="parent">
    {isComp1 && <div><MyComponent1 {...props}/></div>}
    {isComp2 && <div><MyComponent2 {...props}/></div>}
    {isComp3 && <div}><MyComponent3 {...props}/></div>}
</div>

【讨论】：

【解决方案2】：

调用和渲染组件，并执行 api 调用。 visibility CSS property 仅影响页面上 DOM 元素的外观。

请改用 conditional rendering：

<div id="parent">
  {isComp1 && <MyComponent1 {...props}/>}
  {isComp2 && <MyComponent2 {...props}/>}
  {isComp3 && <MyComponent3 {...props}/>}
</div>

【讨论】：