如何通过指定判断条件卸载已加载的React组件？

React 本身的声明式渲染逻辑就可以直接满足你的需求，不需要手动调用组件移除方法，推荐以下两种实现方案：

方案1：直接通过条件渲染控制（最优） #

直接在父组件的JSX返回值中增加判断逻辑即可，React会自动处理组件的挂载/卸载：

import Component from 'components/Component';

function YourParentComponent() {
  // 你的其他业务逻辑
  return (
    <div>
      {/* 其他页面内容 */}
      {!isOnFullDomain() && <Component />}
    </div>
  );
}

当isOnFullDomain()返回true时，Component会直接不渲染，之前已经渲染的实例也会被React自动卸载。

方案2：配合path变化动态更新判断结果 #

如果isOnFullDomain()的判断需要依赖path的变化触发更新，可以把判断结果存在state中，再通过state控制渲染：

import { useState, useEffect } from 'react';
import Component from 'components/Component';

function YourParentComponent() {
  const [shouldRenderComponent, setShouldRenderComponent] = useState(false);

  useEffect(() => {
    setShouldRenderComponent(!isOnFullDomain());
  }, [path]);

  return (
    <div>
      {/* 其他页面内容 */}
      {shouldRenderComponent && <Component />}
    </div>
  );
}

你之前的写法无法生效是因为直接在useEffect中执行Component()只是调用了组件函数本身，并没有将返回的React元素接入React的渲染链路，自然无法通过逻辑控制它的卸载。

内容的提问来源于stack exchange，提问作者CodeG