方式一：子组件触发函数修改父组件状态
先来看一段代码：
// 父组件
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 (
{isModalVisible && }
);
};
export default ParentComponent;
// 子组件
import React from 'react';
const Modal = ({ onClose }) => {
return (
这是一个模态框
);
};
export default Modal;
在这段代码中，父组件来维护状态 isModalVisible，当子组件通过调用onClose 时来设置 isModalVisible为true/false。从而实现子组件的显示或者隐藏。
优点：
每次重新销毁组件重建直接通过isModalVisible && 控制组件挂载/卸载。对于需要每次展示都重置内部状态（如表单）的弹窗，这种销毁重建的方式更符合预期。
痛点：
每次子组件触发onClose时，父组件的状态（isModalVisible）都会变化，进而导致父组件及其所有子组件重新渲染。即使这个弹窗的显隐逻辑完全独立于父组件的其他逻辑，父组件仍然会被迫更新。
如果弹窗的显隐逻辑完全属于子组件自身（比如一个“确认删除”弹窗，点击按钮后才触发关闭），那么让父组件管理这个状态就显得多余，增加了不必要的代码复杂度。
方案二：子组件自治——forwardRef
另一种思路是让子组件自管理状态，通过useImperativeHandle暴露控制方法给父组件，看一段代码：
// 子组件
const Modal = forwardRef((props, ref) => {
const [visible, setVisible] = useState(false);
useImperativeHandle(ref, () => ({
open: () => setVisible(true),
close: () => setVisible(false)
}));
return visible ? (
) : null;
});
// 父组件
function Parent() {
const modalRef = useRef();
return (
);
}
优点：
父组件极简主义父组件无需维护任何状态，尤其适合多个弹窗的场景。调用modalRef.current.open() 简单直接，避免状态声明污染，也可以避免父组件及其所有子组件重新渲染。
痛点：
- 打破组件封装性父组件对子组件内部方法了如指掌，形成紧耦合。一旦子组件重构方法名，所有父组件都需要同步修改。
- 代码复杂度每个组件都需要包裹forwardRef ，对于代码开发不是特别方便。
如何抉择？
父组件状态管理：
- 弹窗显隐与父组件状态强相关（如表单提交成功后才展示）
- 需要严格遵循单向数据流，方便状态追溯
- 弹窗内部需要每次打开重置状态
forwardRef方案：
- 同一弹窗在多个分散位置触发（如页面头部和底部都有触发按钮）
- 弹窗需要保持内部状态（如填写了一半的评论框临时关闭）
- 父组件层级过深，prop drilling成本过高
总结
到底是使用父组件维护还是使用forwardRef， 这取决于具体项目业务的需要 ， 如果你的项目里弹窗的显隐逻辑更多是子组件自己的事，而不是父组件的核心逻辑，那么forwardRef可能是更优雅的解决方案。反之，如果弹窗的开关直接影响父组件的核心状态（如表单提交、数据加载），那么父组件管理仍然是更可靠的选择。
以上就是React中控制子组件显示隐藏的两种方式及对比详解的详细内容，更多关于React控制子组件显示隐藏的资料请关注IT俱乐部其它相关文章！
