如何通过条件禁用组件？答案

【问题标题】：How do I disable a component through a condition?如何通过条件禁用组件？
【发布时间】：2021-10-25 14:04:52
【问题描述】：

我有一个返回true 的条件(isOnFullDomain())，如果我处于这种情况，组件将无法加载。

这是我正在使用的代码：

import Component from 'components/Component';

useEffect(() => {
    Component();
    if (isOnFullDomain()) {
      console.log('remove Component');
    }
  }, [path]);

我真的需要在加载后删除组件，如果我加载一次，它就会显示在屏幕上。

我需要类似的东西：

if (isOnFullDomain()) {
  Component().remove;
}

知道如何解决吗？

【问题讨论】：

标签： javascript reactjs state

【解决方案1】：

你应该能够通过使用 JSX 而不是反应钩子来实现这一点 - 通常钩子是朝着数据管理的方向发展，对一些值更新做出反应并做一些事情。

在这种情况下，我想您有一个使用您的Component 的render 方法。因此，这样的事情会使Component 不出现在页面中。

import Component from 'components/Component';
// ...
const shouldRenderComponent = !isOnFullDomain();

return (
  {shouldRenderComponent && <Component />
);

旁注：如果您不想在内部加载 Component 代码，那么您可能需要查看 import statement 并进行捆绑拆分以“延迟加载”该组件。

【讨论】：

谢谢！！但是我真的需要在加载后删除组件，如果我加载一次，它就会显示在屏幕上。
哦，我想我可能会遇到你的问题。你的isOnFullDomain 怎么样？理想情况下，它应该是一个 React 钩子，这样当 URL 更新时，您的包装器组件会触发重新渲染并根据 isOnFullDomain() 的计算值使 Component 出现/消失。也许您错过了isOnFullDomain() 上的动态行为？

【解决方案2】：

在您渲染此组件的组件中，您可以通过执行类似的操作有条件地渲染它。

return(...
{!isOnFullDomain() && <ComponentToBeRendered/>}
...
)

【讨论】：