如何将 Api id 从我的 parents 传递到我的 child？

Question

我是初学者。预先感谢您分享您的知识。

我成功带来Api并显示在屏幕上

接下来，我想将 'idDrink' 从 Api 的参数传递给 children 的组件。

因为我要在child组件中使用'idDrink'把点击图片的ID交给URL

我们最初设置了一个使用 'Router' 转到另一个页面的设备。

但我决定制作模态而不是转到另一个页面。

这里有问题。

'useParams' 让接管 id 和导入 API 数据变得容易。

但我想要一个模态。我以为我不需要 'Router' 因为 'modal' 不需要地址。

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

这是Main.jsx文件

import React from "react";
import styled from "styled-components";
import { useState, useEffect } from "react";
import Search from "./Search";
import Modal from "../Components/Modal";
import Portal from "../Components/Portal";

const Main = () => {
  const 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);

  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(json);
    setLoading(false);
  }
  useEffect(() => {
    fetchUrl();
  }, []);

  const handleOpen = () => {
    setOpen(true);
    console.log("open Modal");
  };
  const handleClose = () => {
    setOpen(false);
    console.log("close Modal");
  };

  return (
    <Wrapper className="main">
      {loading ? (
        "Loading..."
      ) : (
        <>
          {data.drinks.map(
           This params  ({ idDrink, strDrink, strAlcoholic, strGlass, strDrinkThumb }) => (
              <>
                <Container onClick={handleOpen}>
                  <img src={`${strDrinkThumb}`} alt={`${strDrink}`} />
                  <div key={`${idDrink}`}>{`${strDrink}`}</div>
                </Container>
                {open && (
                  <Portal> 
                    <Modal key={`${idDrink}`} onClose={handleClose} />  I want to hand over here.
                  </Portal>
                )}
              </>
            )
          )}
        </>
      )}
      <Search />
    </Wrapper>
  );
};
export default Main;

这是Child组件文件Modal.jsx

import React, { useState, useEffect } from "react";
import axios from "axios";
import styled from "styled-components";

const Modal = ({ onClose, idDrink }) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    let url = `https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${idDrink}`;
    axios
      .get(url)
      .then((res) => {
        setData(res.data.drinks);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [idDrink]); 
  return (
    <MyModals onClick={onClose}>
      <Content>Detail</Content>
    </MyModals>
  );
};

export default Modal;

我实现此功能的原因是因为 Api 地址每次点击都会改变。

请帮助我。

Answer 1

如果我没记错的话，你想在你的 Modal 组件中传递 idDrink 的值。

使用

<Modal idDrink={idDrink} onClose={handleClose} />

而不是<Modal key={`${idDrink}`} onClose={handleClose} />

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

Answer 2

使用<Modal id_Drink={idDrink} onClose={handleClose} />
在模态中添加道具：const Modal = (props) => {}
在您的模式中访问 idDrink：props.id_Drink , 在你的模式中访问 handleClose: props.onClose()

如何将 Api id 从我的 parents 传递到我的 child？

How can I pass the Api id from my parents to my child?

javascript

api

simplemodal

reactjs

react-hooks