在Reaction中将数据加载到子组件时出现问题 [英] Having a problem loading in data to child component in react

问题描述

我正在构建一个图库，您在其中单击图像，它将使用道具加载到一个单独的组件中，该图像是一个URL，取自硬编码的数组，其中src通过css作为背景图像加载。我面临的挑战是将数据连接到该组件。我试着用回调将数据从父母连接到孩子，但没有成功。我想我想做的是横向连接组件，我不想使用REDUX，因为我不熟悉。

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

注意：我已经尝试在Gallery.js中导入Image组件并按如下方式呈现它：<Image src={props.src} id={props.id}/>，我发现数据连接得很好，但这无助于保持组件的分离。

我已经拥有的： 我在app.js中有一个路由，它允许我很好地转到图像路由路径它是从图像组件中的pros.src加载的url，这是我的挑战

更新：已解决Click here to see the solution!

代码如下：

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;

推荐答案

您应该能够使用路由器Link通过to属性上的&Quot；State&Quot；传递数据。

来自Reaction路由器的documentation：

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

这篇关于在Reaction中将数据加载到子组件时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！