愿所有的美好和期待都能如约而至

在Reaction中将数据加载到子组件时出现问题

发布时间:  来源:互联网  作者:匿名  标签:components error Having a problem loading in data to child component in react ex  热度:37.5℃

本文介绍了在Reaction中将数据加载到子组件时出现问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在构建一个图库,您在其中单击图像,它将使用道具加载到一个单独的组件中,该图像是一个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中将数据加载到子组件时出现问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP