ReactJS中点击Material UI下拉选择后隐藏子组件的实现咨询

完全可以实现，这里提供两种常用的实现思路，你可以根据实际业务场景选择：

方案1：组件A内部控制显示状态（最便捷，不需要修改父组件逻辑） #

核心是在组件A内部新增一个状态标记是否需要显示，选中选项后修改状态，控制组件渲染/隐藏即可，修改后的代码如下：

const A: React.FC<AProps> = (props) => {
  // 新增控制显示的状态，默认显示
  const [isVisible, setIsVisible] = useState(true);

  const handleChange = (e: React.ChangeEvent<{ value: unknown }>) => {
    const site = e.target.value as string;
    dispatch(changeActiveSite(site));
    if (site) {
      dispatch(getAnalysers(site));
    } else {
      dispatch(clearSiteData(site));
    }
    // 选中完成后设置为隐藏
    setIsVisible(false);
  };

  const sites = [
    {
      ident: "",
      name: "None",
    },
  ].concat(sitess);

  // 状态为隐藏时直接返回null，不在DOM中渲染节点，也可以用包裹容器加style={{display: isVisible ? 'block' : 'none'}}实现
  if (!isVisible) return null;

  return (
    <React.Fragment>
      <FormControl className={classes.formControl}>
        <InputLabel id="site-select-input-label">site</InputLabel>
        <Select
          id="site-select"
          value={currentSiteId}
          labelId="site-select-input-label"
          onChange={(e) => handleChange(e)}
        >
          {sites.map((site) => {
            return (
              <MenuItem key={site.ident} value={site.ident}>
                {site.name}
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
    </React.Fragment>
  );
};

如果后续需要重新显示组件A，只需要在对应的逻辑里把isVisible重置为true即可。

方案2：父组件B控制显示状态（适合状态需要跨组件共享的场景） #

如果组件A的显示状态需要同步给其他兄弟组件使用，就可以把状态提到父组件B维护：

1. 先给组件A新增一个选中完成的回调props，首先给AProps类型加onSelectFinish: () => void属性，再修改组件A逻辑：

const A: React.FC<AProps> = (props) => {
  const handleChange = (e: React.ChangeEvent<{ value: unknown }>) => {
    const site = e.target.value as string;
    dispatch(changeActiveSite(site));
    if (site) {
      dispatch(getAnalysers(site));
    } else {
      dispatch(clearSiteData(site));
    }
    // 选中后调用父组件传的回调
    props.onSelectFinish();
  };

  // 其余原有逻辑保持不变...
};

2. 父组件B维护显示状态，接收回调修改状态：

const B: React.FC = () => {
  const [showComponentA, setShowComponentA] = useState(true);
  // 其余原有逻辑保持不变...

  return (
    <div>
      {showComponentA && <A site={site} onSelectFinish={() => setShowComponentA(false)} />}
    </div>
  )
}

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