Javascript 如何将父母的Api id传递给孩子？

我是初学者。提前感谢您分享您的知识

我成功地带来了Api并将其显示在屏幕上

接下来，我想将“idDrink”从Api的参数传递到孩子们的组件

因为我必须使用子组件中的“idDrink”将点击图片的ID交给URL

我们最初设置了一个使用“路由器”转到另一个页面的设备

但我决定做模态而不是去另一个页面

这里有个问题

“useParams”使接管id和导入API数据变得容易

但是我想要一个模型。我想我不需要“路由器”，因为“模态”不需要地址

如果我错了，请告诉我。请告诉我如何解决这个问题

这是Main.jsx文件

从“React”导入React；
从“样式化组件”导入样式化；
从“react”导入{useState，useffect}；
从“/Search”导入搜索；
从“./组件/模态”导入模态；
从“./组件/门户”导入门户；
常量Main=（）=>{
常量url=”https://www.thecocktaildb.com/api/json/v1/1/random.php";
const[data，setData]=useState（[]）；
const[loading，setLoading]=useState（true）；
const[open，setOpen]=useState（false）；
异步函数fetchUrl（）{
const response=等待获取（url）；
const json=await response.json（）；
setData（json）；
设置加载（假）；
}
useffect（（）=>{
fetchUrl（）；
}, []);
const handleOpen=（）=>{
setOpen（真）；
控制台日志（“打开模式”）；
};
常量handleClose=（）=>{
setOpen（假）；
控制台日志（“关闭模式”）；
};
返回(
{加载(
“正在加载…”
) : (
{data.drinks.map(
此参数如果我没有错，您希望在模态组件中传递idDrink的值

使用


而不是

在父组件中。
希望您能够从Modal访问idDrink

使用

在模态中添加道具：const modal=（props）=>{}
在您的模式中访问idDrink:
props.id\u Drink
，访问模式中的handleClose:
props.onClose（）