在反应中将数据加载到 child 组件时出现问题

Question

我正在构建一个图库，您可以在其中单击图片，它将使用道具加载到单独的组件中，这张图片是 URL，取自 hard-coded 数组，其中 src通过 CSS 作为背景图像加载。我的挑战是将数据连接到该组件。我尝试使用回调将数据从 parent 连接到 child，但没有成功。我想我想做的是横向连接组件，我不想使用redux，因为我不熟悉。

注意：我知道您可以使用 window.location.href = "props.src/" 在 GalleryContainer.js 中加载图像，但是，我希望图像加载到图像组件中，该组件将充当容器来保存图片为用户提供其他选项，例如下载图片等...

注意：我已经尝试在 Gallery.js 中导入图像组件并像这样渲染它：<Image src={props.src} id={props.id}/>，我发现数据连接很好，但这无助于保持组件分离.

我已经拥有的：我在 app.js 中有一条路线，可以让我很好地进入图像路线路径，它正在从图像组件中的 props.src 加载到 url 中，这是我的挑战

更新：已解决

代码如下：

GalleryList.js

import Gallery from "./Gallery";
import Header from "./UI/Header";
import Footer from "./UI/Footer";

import styles from "./Gallery.module.css";

const DUMMY_IMAGES = [
  {
    id: "img1",
    src: "https://photos.smugmug.com/photos/i-vbN8fNz/1/X3/i-vbN8fNz-X3.jpg",
  },
  {
    id: "img2",
    src: "https://photos.smugmug.com/photos/i-fSkvQJS/1/X3/i-fSkvQJS-X3.jpg",
  },
  {
    id: "img3",
    src: "https://photos.smugmug.com/photos/i-pS99jb4/0/X3/i-pS99jb4-X3.jpg",
  },
];

const GalleryList = () => {
  const imagesList = DUMMY_IMAGES.map((image) => (
    <Gallery id={image.id} key={image.id} src={image.src} />
  ));

  return (
    <>
      <Header />
      <ul className={styles.wrapper}>
        <li className={styles.list}>{imagesList}</li>
      </ul>
      <a href="/">Home</a>
      <Footer />
    </>
  );
};

export default GalleryList;

Gallery.js

import GalleryConatiner from "./UI/GalleryContainer";

import styles from "./Gallery.module.css";

const Gallery = (props) => {
  return (
    <>
      <div className={styles["gal-warp"]}>
        <GalleryConatiner id={props.id} key={props.id} src={props.src} />
      </div>
    </>
  );
};

export default Gallery;

GalleryContainer.js

import styles from "../Gallery.module.css";

const GalleryConatiner = (props) => {
  const selectedImg = () => {
    if (props.id) {
      // window.location.href = `image/${props.src}`;
      window.location.href = "image/"
    }
  };
  return (
    <ul>
      <li className={styles["gallery-list"]}>
        <div
          onClick={selectedImg}
          className={styles["div-gallery"]}
          style={{
            backgroundImage: `url(${props.src}`,
            height: 250,
            backgroundSize: "cover",
          }}
        ></div>
      </li>
    </ul>
  );
};
export default GalleryConatiner;

Image.js

import styles from "./Image.module.css";

const Image = (props) => {
  return (
    <section>
      <h1 className={styles["h1-wrapper"]}>Image:{props.id}</h1>
      <div className={styles.wrapper}>
        <div
          className={styles["image-container"]}
          style={{
            backgroundImage: `url(${props.src}`,
          }}
        ></div>
      </div>
    </section>
  );
};

export default Image;

Answer 1

您应该能够使用路由器 Link 通过 to 属性上的“状态”传递数据。

来自 React Router 的 documentation:

<Link
  to={{
    pathname: "/images",
    state: { imgUrl: props.src }
  }}
/>

在反应中将数据加载到 child 组件时出现问题

Having a problem loading in data to child component in react

javascript

components

reactjs

react-props