javascript - ReactJs 循环中的模态

Question

我大致遵循了这个react modal教程。
当我将模态框放入具有多个链接的循环并打开模态框时，它会打开所有模态框(当然)。我正在尝试找出如何打开适当的模式(针对 id)

Alert 组件与循环中的 Modal

export default function Alert({}: Props) {
  const { alerts, loading } = useGetAlerts();
  const { isShown, toggle } = useModal();

  return (
    <div className={styles.alertHeader}>
      <div className={styles.title}>Alerts</div>
      <div className={styles.alertFrame}>
        <div className={styles.counter}>{`${alerts?.items.length}`}</div>
        <div className={styles.titleFrame}>
          <div className={styles.summaryTitle}>
            Outstanding <br></br>Alerts
          </div>
        </div>
      </div>
      {loading ? (
        <SnakeLoader />
      ) : (
        alerts?.items.slice(0, 5).map((a) => (
          <div key={`id_${a}`} className={styles.alertFrame}>
            <div className={styles.titleFrame} id="titleFrame">
              <div className={styles.alertTitle} id="alertTitle">
                {' '}
                {`${a.message}`}{' '}
              </div>
              <div className={styles.alertLink} id="alertLink">
                <button onClick={toggle}>Click for More</button>
                <Modal
                  isShown={isShown}
                  hide={toggle}
                  modalContent={a.message}
                  headerText={a.id}
                />
              </div>
            </div>
            <div className={styles.alertClose} id="alertClose">
              X
            </div>
          </div>
        ))
      )}
    </div>
  );
}

模态组件

import React, { FunctionComponent, useEffect } from 'react';
import ReactDOM from 'react-dom';
import styles from './Modal.module.scss';
//https://nainacodes.com/blog/create-an-accessible-and-reusable-react-modal

export interface ModalProps {
  isShown: boolean;
  hide: () => void;
  modalContent: string;
  headerText: string;
}

export const Modal: FunctionComponent<ModalProps> = ({
  isShown,
  hide,
  modalContent,
  headerText,
}) => {
  const modal = (
    <div className={styles.modalContainer}>
      <div className={styles.styledModal}>
        <div className={styles.header}>
          <div className={styles.headerText}>{headerText}</div>
          <button className={styles.closeButton} onClick={hide}>
            X
          </button>
        </div>
        <div className={styles.content}>{modalContent}</div>
      </div>
    </div>
  );

  return isShown ? ReactDOM.createPortal(modal, document.body) : null;
};

useModal 方法

export const useModal = () => {
  const [isShown, setIsShown] = useState<boolean>(false);
  const toggle = () => setIsShown(!isShown);
  const id = '';
  return {
    isShown,
    toggle,
    id
  };
};

对 React 非常陌生，非常感谢任何帮助

Answer 1

目前，每个模态框都使用相同的状态来切换其可见性，isShown。 toggle 是改变该状态的函数。为了单独控制模态，我们需要一个单独的状态和一个单独的函数来为您创建的每个单独的模态切换该状态。一种选择可能是摆脱 useModal Hook ，并将 isShown 和 toggle 移动到 Modal 组件本身。这样，当创建每个 Modal 组件时，它就有自己的状态，而不是从该钩子(Hook)共享它。