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