我正在构建一个图库,您在其中单击图像,它将使用 props 加载到单独的组件中,此图像是一个 URL,取自硬编码数组,其中 src 通过 CSS 作为背景图像加载.我的挑战是将数据连接到该组件。我尝试通过回调将数据从父级连接到子级,但没有成功。我想我要做的是将组件横向连接,我不想使用 redux,因为我不熟悉。
注意:我知道您可以使用 window.location.href = "props.src/"
在 GalleryContainer.js 中加载图像,但是,我希望图像加载到 Image 组件中,该组件将充当容器来保存提供给用户的图像其他选项,例如下载图像等...
注意:我尝试在 Gallery.js 中导入 Image 组件并像这样渲染它:<Image src={props.src} id={props.id}/>
,我发现数据连接得很好,但这无助于保持组件分离。
我已经拥有的: 我在 app.js 中有一个路由,它允许我转到图像路由路径,它正在从 props.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;
画廊.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;
答案 0 :(得分:0)
您应该能够使用路由器 Link
通过 to
属性上的“状态”传递数据。
来自 React Router 的 documentation:
<Link
to={{
pathname: "/images",
state: { imgUrl: props.src }
}}
/>