[英]Having a problem loading in data to child component in react
I am building a gallery where you click on the image and it will load in a separate component using props, this image is a URL, taken from a hard-coded array, where the src is loaded as a background image via CSS.我正在构建一个图库,您在其中单击图像,它将使用道具加载到单独的组件中,该图像是 URL,取自硬编码数组,其中 src 通过 CSS 作为背景图像加载。 My challenge is connecting the data to that component.
我的挑战是将数据连接到该组件。 I have tried connecting the data from parent to child with callbacks, but no luck.
我尝试使用回调将数据从父级连接到子级,但没有运气。 I think what I am trying to do is connect components sideways, and I don't want to use redux, as I am not familiar.
我想我想做的是横向连接组件,我不想使用 redux,因为我不熟悉。
Note: I am aware you can just load the image in GalleryContainer.js using window.location.href = "props.src/"
, however, I want the image to load in the Image component that will act as a container to hold the image giving the user other options such as downloading the image, etc...注意:我知道您可以使用
window.location.href = "props.src/"
将图像加载到 GalleryContainer.js 中,但是,我希望将图像加载到 Image 组件中,该组件将充当容器来保存图像为用户提供其他选项,例如下载图像等...
Note: I have tried importing the Image component in Gallery.js and rendering it like so: <Image src={props.src} id={props.id}/>
, and I find the data connects just fine, but this does not help keep the component separate.注意:我尝试在 Gallery.js 中导入 Image 组件并像这样渲染它:
<Image src={props.src} id={props.id}/>
,我发现数据连接得很好,但这确实无助于保持组件分离。
What I have already: I have a route in app.js that allows me to go to the image route path just fine it's loading in the url from props.src in the image component that is my challenge我已经拥有的:我在 app.js 中有一条路线,它允许我从 go 到图像路由路径就好了它从图像组件中的 props.src 加载到 url 中,这是我的挑战
UPDATE: SOLVED Click here to see the solution!更新:已解决点击此处查看解决方案!
Here is the code:这是代码:
GalleryList.js 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 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 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图片.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;
You should be able to use the router Link
to pass data via "state" on the to
property.您应该能够使用路由器
Link
通过to
属性上的“状态”传递数据。
From React Router's documentation :来自 React Router 的文档:
<Link
to={{
pathname: "/images",
state: { imgUrl: props.src }
}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.