React中控制子组件显示隐藏的两种方式及对比详解_Javascript

方式一：子组件触发函数修改父组件状态

先来看一段代码：

// 父组件
import react, { usestate } from 'react';
import modal from './modal';

const parentcomponent = () => {
  const [ismodalvisible, setismodalvisible] = usestate(false);

  const handleopenmodal = () => {
    setismodalvisible(true);
  };

  const handleclosemodal = () => {
    setismodalvisible(false);
  };

  return (
    <div>
    <button onclick={handleopenmodal}>打开模态框</button>
     {ismodalvisible && <modal onclose={handleclosemodal} />}
    </div>
   );
  };

  export default parentcomponent;

  // 子组件
  import react from 'react';

  const modal = ({ onclose }) => {
    return (
      <div classname="modal">
      <p>这是一个模态框</p>
      <button onclick={onclose}>关闭模态框</button>
      </div>
    );
  };

  export default modal;

在这段代码中，父组件来维护状态 ismodalvisible，当子组件通过调用onclose 时来设置 ismodalvisible为true/false。从而实现子组件的显示或者隐藏。

优点：

每次重新销毁组件重建直接通过ismodalvisible && <modal/> 控制组件挂载/卸载。对于需要每次展示都重置内部状态（如表单）的弹窗，这种销毁重建的方式更符合预期。

痛点：

每次子组件触发onclose时，父组件的状态（ismodalvisible）都会变化，进而导致父组件及其所有子组件重新渲染。即使这个弹窗的显隐逻辑完全独立于父组件的其他逻辑，父组件仍然会被迫更新。

如果弹窗的显隐逻辑完全属于子组件自身（比如一个“确认删除”弹窗，点击按钮后才触发关闭），那么让父组件管理这个状态就显得多余，增加了不必要的代码复杂度。

方案二：子组件自治——forwardref

另一种思路是让子组件自管理状态，通过useimperativehandle暴露控制方法给父组件，看一段代码：

// 子组件
const modal = forwardref((props, ref) => {
  const [visible, setvisible] = usestate(false);

  useimperativehandle(ref, () => ({
    open: () => setvisible(true),
    close: () => setvisible(false)
  }));

  return visible ? (
    <div classname="modal">
      <button onclick={() => setvisible(false)}>关闭</button>
    </div>
  ) : null;
});

// 父组件
function parent() {
  const modalref = useref();

  return (
    <div>
      <button onclick={() => modalref.current?.open()}>打开弹窗</button>
      <modal ref={modalref} />
    </div>
  );
}

优点：

父组件极简主义父组件无需维护任何状态，尤其适合多个弹窗的场景。调用modalref.current.open() 简单直接，避免状态声明污染，也可以避免父组件及其所有子组件重新渲染。

痛点：

打破组件封装性父组件对子组件内部方法了如指掌，形成紧耦合。一旦子组件重构方法名，所有父组件都需要同步修改。
代码复杂度每个组件都需要包裹forwardref ，对于代码开发不是特别方便。

如何抉择？

父组件状态管理：

弹窗显隐与父组件状态强相关（如表单提交成功后才展示）
需要严格遵循单向数据流，方便状态追溯
弹窗内部需要每次打开重置状态

forwardref方案：

同一弹窗在多个分散位置触发（如页面头部和底部都有触发按钮）
弹窗需要保持内部状态（如填写了一半的评论框临时关闭）
父组件层级过深，prop drilling成本过高

总结

到底是使用父组件维护还是使用forwardref， 这取决于具体项目业务的需要，如果你的项目里弹窗的显隐逻辑更多是子组件自己的事，而不是父组件的核心逻辑，那么forwardref可能是更优雅的解决方案。反之，如果弹窗的开关直接影响父组件的核心状态（如表单提交、数据加载），那么父组件管理仍然是更可靠的选择。

以上就是react中控制子组件显示隐藏的两种方式及对比详解的详细内容，更多关于react控制子组件显示隐藏的资料请关注代码网其它相关文章！