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

// 父组件
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;

// 子组件
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>
  );
}