React 中的可重用模态答案

【问题标题】：Reusable Modal in ReactReact 中的可重用模态
【发布时间】：2022-11-19 01:54:55
【问题描述】：

我有数据

const data  = [
      {
         id: "React",
        img: "https://cdn.worldvectorlogo.com/logos/react-2.svg",
       info: "React is the most popular JavaScript library and is used by Facebook, Instagram, Netflix, Airbnb, Uber Eats, and many more.",
       data: [{"React Hooks": {
        description: "React Hooks is a new addition in React 16.8. It lets you use state and other React features without writing a class."},
    }, {"React Redux": {
        description: "React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data."}
    }]},{..}]

我也有设置名称和 id 类似于 data.[0].id 的按钮。我想单击按钮并显示与按钮对应的模式。

问题：

如何让 Modal 组件根据单击的按钮/元素提取此数据？ //我怀疑是 API 调用，或者道具。

我是否在每个按钮下方添加多个模态组件？ // 我在想是的。

在哪里可以找到有关此主题的更多信息？ // 我一直在努力小时和正确的方向会很棒。

进一步澄清区：

import Modal from './Modal'

export function App() {
  const [isOpen, setIsOpen] = useState(true)

  return (
    <button id={React}>
      React
      <Modal open={isOpen}/>
    </button>

    <button id={Express}>
    Express
      <Modal open={isOpen}/>
    </button>
)
}

模态组件

Import data from './data.js'

export default Modal({open}) {
  if(!open) return null

  return (
   <div className='overlay'>
     <div className='modalContainer'></div>
   </div>
)
}

【问题讨论】：

所以你的计划是：你有对应于 data 数组中的元素的按钮。单击时，他们会打开一个模式来显示info 也许吧？你有没有试过类似的东西：当一个按钮被点击时，设置一些状态（比如id）并且在你的render函数中你显示基于id的模态数据？
仅供参考，如果您还包括其余的 javascript，帮助会容易得多——可能在 codesandbox 链接或 jsfiddle 或类似的东西中
我添加了一些额外的代码，我希望它足够了。

标签： javascript reactjs react-hooks react-props

【解决方案1】：

您可以通过安装 react-modal 库来使用它

npm i react-modal

进入你的 React 项目并像这样使用它：

import Modal from "react-modal";
Modal.setAppElement("#root");

如果你想有多个按钮，你可以使用你的data数组并通过它映射

{data.map((item, index) => (
        <div>
          <button
            onClick={() => {
              setIsModalOpen(true);
              setPattern(index);
            }}
          >
            {item.id}
          </button>
        </div>
      ))}

通过这样做，您还可以为您想要的索引设置模式。然后，您可以根据您拥有的模式显示模态：

<Modal
        isOpen={modalIsModalOpen}
        style={modalCustomStyles}
        onRequestClose={() => setIsModalOpen(false)}
      >
        <p>id is {data[pattern].id}</p>
        <img src={data[pattern].img} alt={data[pattern].img} width="100" />
        <p>{data[pattern].info}</p>
      </Modal>

您可以在sandbox 找到工作原型。

【讨论】：