如何通过条件禁用组件？

Question

I have a condition (isOnFullDomain()) that returns true , if I am in this condition, the Component can't load.

This is the code i am using:

import Component from 'components/Component';

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

I really need to remove the component once it's loaded, if I load it once, it's showing up on the screen.

I need something similar to:

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

Any idea how I can fix it?

Answer 1

You should be able to achieve that by using JSX, rather than react hooks - usually hooks are move towards data management, react to some value updates and do something about it.

In this case I imagine you have a render method that uses your Component . Hence something like this would make the Component not appear in the page.

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

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

Sidenote: if you don't want to load the Component code internally, then you might want to have a look at the import statement and bundle splitting in order to "lazy load" that component.

Answer 2

In the component where you are rendering this component, you could conditionally render it, by doing something like this.

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