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

先来看一段代码：

1. // 父组件
   
2. import React, { useState } from 'react';
   
3. import Modal from './Modal';
   
4. 
   
5. const ParentComponent = () => {
   
6.   const [isModalVisible, setIsModalVisible] = useState(false);
   
7. 
   
8.   const handleOpenModal = () => {
   
9.     setIsModalVisible(true);
   
10.   };
    
11. 
    
12.   const handleCloseModal = () => {
    
13.     setIsModalVisible(false);
    
14.   };
    
15. 
    
16.   return (
    
17.     <div>
    
18.     <button onClick={handleOpenModal}>打开模态框</button>
    
19.      {isModalVisible && <Modal onClose={handleCloseModal} />}
    
20.     </div>
    
21.    );
    
22.   };
    
23. 
    
24.   export default ParentComponent;
    
25. 
    
26.   // 子组件
    
27.   import React from 'react';
    
28. 
    
29.   const Modal = ({ onClose }) => {
    
30.     return (
    
31.       <div className="modal">
    
32.       <p>这是一个模态框</p>
    
33.       <button onClick={onClose}>关闭模态框</button>
    
34.       </div>
    
35.     );
    
36.   };
    
37. 
    
38.   export default Modal;

复制代码

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


优点：

每次重新销毁组件重建直接通过

1. isModalVisible && <Modal/>

复制代码

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


痛点：

每次子组件触发

1. onClose

复制代码

时，父组件的状态（isModalVisible）都会变化，进而导致父组件及其所有子组件重新渲染。即使这个弹窗的显隐逻辑完全独立于父组件的其他逻辑，父组件仍然会被迫更新。
如果弹窗的显隐逻辑完全属于子组件自身（比如一个“确认删除”弹窗，点击按钮后才触发关闭），那么让父组件管理这个状态就显得多余，增加了不必要的代码复杂度。

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

另一种思路是让子组件自管理状态，通过

1. useImperativeHandle

复制代码

暴露控制方法给父组件，看一段代码：

1. // 子组件
   
2. const Modal = forwardRef((props, ref) => {
   
3.   const [visible, setVisible] = useState(false);
   
4. 
   
5.   useImperativeHandle(ref, () => ({
   
6.     open: () => setVisible(true),
   
7.     close: () => setVisible(false)
   
8.   }));
   
9. 
   
10.   return visible ? (
    
11.     <div className="modal">
    
12.       <button onClick={() => setVisible(false)}>关闭</button>
    
13.     </div>
    
14.   ) : null;
    
15. });
    
16. 
    
17. // 父组件
    
18. function Parent() {
    
19.   const modalRef = useRef();
    
20. 
    
21.   return (
    
22.     <div>
    
23.       <button onClick={() => modalRef.current?.open()}>打开弹窗</button>
    
24.       <Modal ref={modalRef} />
    
25.     </div>
    
26.   );
    
27. }

复制代码

优点：

父组件极简主义父组件无需维护任何状态，尤其适合多个弹窗的场景。调用

1. modalRef.current.open()

复制代码

简单直接，避免状态声明污染，也可以避免父组件及其所有子组件重新渲染。
痛点：

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

如何抉择？

父组件状态管理：

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

forwardRef方案：

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

总结

到底是使用父组件维护还是使用forwardRef， 这取决于具体项目业务的需要 ， 如果你的项目里弹窗的显隐逻辑更多是子组件自己的事，而不是父组件的核心逻辑，那么

1. forwardRef

复制代码

可能是更优雅的解决方案。反之，如果弹窗的开关直接影响父组件的核心状态（如表单提交、数据加载），那么父组件管理仍然是更可靠的选择。
以上就是React中控制子组件显示隐藏的两种方式及对比详解的详细内容，更多关于React控制子组件显示隐藏的资料请关注脚本之家其它相关文章！

来源：https://www.jb51.net/javascript/340091qam.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！