Javascript 如何将变量传递给modals？

我正在将React.js与传单一起使用，我不知道当我点击我的模式饮食时如何传递变量以获取。我的意思是这就是我所拥有的

当我点击open modal时，我得到：

我想，当我点击上面的打开模式时，我得到了饮料，另一个吃的不是lorem ipsum

以下是地图的代码：

import React from "react";
import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import { defaultMarker } from "./defaultMarker";
import "./Map.css";

const center = [51.505, -0.09];

const data = [
  { title: "eat", coord: [50, -0.09] },
  { title: "drink", coord: [52, -0.5] }
];

const MapComp = ({ onOpen }) => {
  return (
    <Map style={{ height: "100vh" }} center={center} zoom={5}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      {data.map((todo) => (
        <Marker position={todo.coord} icon={defaultMarker}>
          <Popup className="request-popup">
            <button onClick={onOpen}>Open Modal</button>
          </Popup>
        </Marker>
      ))}
    </Map>
  );
};

export default MapComp;

从“React”导入React；
从“反应传单”导入{Map，tillelayer，Marker，Popup}；
从“/defaultMarker”导入{defaultMarker}；
导入“/Map.css”；
常数中心=[51.505，-0.09]；
常数数据=[
{标题：“吃”，坐标：[50，-0.09]}，
{标题：“饮料”，协调：[52，-0.5]}
];
常量MapComp=（{onOpen}）=>{
返回(
{data.map（（todo）=>(
开放模态
))}
);
};
导出默认的MapComp；

还有模态的代码：

import React from "react";
// import { Button, Modal } from "react-bootstrap";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export default function CustomModal({ show, onClose }) {
  return (
    <div>
      <Modal isOpen={show} toggle={onClose}>
        <ModalHeader onClose={onClose}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={onClose}>
            Do Something
          </Button>{" "}
          <Button color="secondary" onClick={onClose}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

从“React”导入React；
//从“react bootstrap”导入{按钮，模式}；
从“reactstrap”导入{Button，Modal，ModalHeader，ModalBody，ModalFooter}；
导出默认函数CustomModal（{show，onClose}）{
返回(
情态标题
Lorem ipsum dolor sit amet，Concetetur Adipising Elite，sed do
这是一种临时性的劳动和生活方式
最低成本、最低成本和最低成本
我是一个普通消费者，我是一个酒鬼
这是一个充满活力的故事
不可忽视的例外情况，必须在
这是我的错。
做点什么
{" "}
取消
);
}

您也可以在此处找到我的代码：

我该怎么做

---

多谢各位

您可能需要添加一些状态管理，这样您可以添加“全局范围”，在组件之间共享信息，可能：

• ：如果您有复杂的数据，请使用该选项
• ：也许你需要走这条路，只要你需要一点状态管理

---

您可能需要添加一些状态管理，这样您可以添加“全局范围”，在组件之间共享信息，可能：

• ：如果您有复杂的数据，请使用该选项
• ：也许你需要走这条路，只要你需要一点状态管理

---

传递变量的示例代码

在你的应用程序中

export default function App() {
  const [show, setShow] = useState(false);
  const [ variableToModel, setVariableToModel] = useState('')

  const handleClose = () => setShow(false);
  const handleOpen = (variable) => {
        setShow(true);
        setVariableToModel(variable)
  }

  return (
    <>
      <MapComp onOpen={handleOpen} />
      <Modal show={show} onClose={handleClose} myProp={variabletoModel} />
    </>
  );
}

导出默认函数App（）{
const[show，setShow]=useState（false）；
常量[variableToModel，setVariableToModel]=useState（“”）
const handleClose=（）=>setShow（false）；
const handleOpen=（变量）=>{
设置显示（正确）；
setVariableToModel（变量）
}
返回(
);
}

在你的地图上

 <button onClick={() => onOpen('SHOW ME IN THE MODAL'}>Open Modal</button>

onOpen（'SHOW ME IN THE model'）}>Open model

传递变量的示例代码

在你的应用程序中

export default function App() {
  const [show, setShow] = useState(false);
  const [ variableToModel, setVariableToModel] = useState('')

  const handleClose = () => setShow(false);
  const handleOpen = (variable) => {
        setShow(true);
        setVariableToModel(variable)
  }

  return (
    <>
      <MapComp onOpen={handleOpen} />
      <Modal show={show} onClose={handleClose} myProp={variabletoModel} />
    </>
  );
}

导出默认函数App（）{
const[show，setShow]=useState（false）；
常量[variableToModel，setVariableToModel]=useState（“”）
const handleClose=（）=>setShow（false）；
const handleOpen=（变量）=>{
设置显示（正确）；
setVariableToModel（变量）
}
返回(
);
}

在你的地图上

 <button onClick={() => onOpen('SHOW ME IN THE MODAL'}>Open Modal</button>

onOpen（'SHOW ME IN THE model'）}>Open model