[英]REACTJS pass a variable into props
galleryItems = () => {
console.log("brands", this.state.brands)
var obj = []
var filteredData = this.state.brands.forEach((item) => {
var lol = item.media.filter((item2) => item2.collection_name === "images")
obj = [...obj, ...lol]
})
console.log("obj", obj)
return obj.map((image, i) => (
<div key={i} className="card-img-top"><img src={image.url} onClick={this.props.carouselBrand()}/></div>
));
};
I have filtered out this.state.brands 我已经过滤掉this.state.brands
as you can see, it has media. 如您所见,它具有媒体。 I have filtered it and mapped all the media that has a collection_name === "images"
我已经过滤并映射了具有collection_name ===“ images”的所有媒体
and on this line of code: <div key={i} className="card-img-top"><img src={image.url} onClick={this.props.carouselBrand()}/></div>
I want to pass the slug value of that image in the onClick function. 并在以下代码行上:
<div key={i} className="card-img-top"><img src={image.url} onClick={this.props.carouselBrand()}/></div>
我想在onClick函数中传递该图像的子弹值。 But I don't know how because I have already filtered it. 但是我不知道怎么做,因为我已经过滤了它。 How can I get the slug of the brand?
如何获得该品牌的子弹?
decorate the objects you compose. 装饰您组成的对象。
var filteredData = this.state.brands.forEach(({media, slug}) => {
const lol = media.filter(item2 => item2.collection_name === "images").map(image => ({ slug, ...image }));
obj.push.apply(obj, lol);
})
console.log("obj", obj)
return obj.map((image, i) => (
<div key={i} className="card-img-top"><img src={image.url} onClick={() => this.props.carouselBrand(image.slug)}/></div>
));
You could either append slug
to your new array, or keep a copy of the initial object with filtered media
. 您可以将
slug
附加到新数组,或者保留带有过滤media
的初始对象的副本。
const obj = [].concat(...this.state.brands.map(item =>
item.media.map(item2 => ({ slug: item.slug, ...item2 }) )
.filter(item2 => item2.collection_name === 'images'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.