如何使用来自 javascript 数组的图像使用过滤器和映射函数做出反应 [英] How Use images from javascript array in react using filter and map function
问题描述
我有一个这样的 javascript 数组:
const IMGS = [{编号:0,路径:"../img/a1.jpeg",},{编号:1,路径:"../img/a1-01.jpeg",},{编号:2,路径:"../img/a1-02.jpeg",},{编号:3,路径:"../img/a1-03.jpeg",}]导出默认 IMGS;
还有更多的图片,我只是展示了其中的一些,我需要显示这个数组中的所有图像.条件是 image_id
应该是 >=18
但 <30
.我怎样才能做到这一点?(我需要知道语法).
我知道我可以使用 filter
或 map
函数来做到这一点,实际上我是来自 c++、python 背景的 javascript 新手.对我来说看起来有点混乱.请帮忙!这是我渲染它的反应代码
<超大屏幕><img src={background} alt=未加载"id="jumbotron-image";className=img-fluid"/></Jumbotron><div className="容器"><div className="row"><h1>趋势</h1>
<div className="row">{/*图片放在这里*/}
</React.Fragment>
const IMGS = [{编号:0,src:require("../img/a1.jpeg"),},{编号:1,src: require("../img/a1.jpeg"),},{编号:2,src:require("../img/a1.jpeg"),},{编号:20,src:require("../img/a1.jpeg"),},]const imgFilter= IMGS.filter((img) => img.id >= 18 && img.id <30){imgFilter.map(p => {return ;})}
I have a javascript array like this:
const IMGS = [{
id: 0,
path: "../img/a1.jpeg",
},
{
id: 1,
path: "../img/a1-01.jpeg",
},
{
id: 2,
path: "../img/a1-02.jpeg",
},
{
id: 3,
path: "../img/a1-03.jpeg",
}
]
export default IMGS;
There are more images I am just showing few of them,
I need to show all the images in react from this array. The condition is the image_id
should be >=18
but <30
. How can I achieve that?
(I need to know the syntax).
I know I can do it using filter
or map
function, actually I'm new to javascript coming from c++, python background. It looks bit confusing to me. Please help!
This is my react code where I'm rendering it
<React.Fragment>
<Jumbotron>
<img src={background} alt="Not loading" id="jumbotron-image" className="img-fluid"/>
</Jumbotron>
<div className="container">
<div className="row">
<h1>Trending</h1>
</div>
<div className="row">
{/*images go here*/}
</div>
</div>
</React.Fragment>
const IMGS = [
{
id: 0,
src:require("../img/a1.jpeg"),
},
{
id: 1,
src: require("../img/a1.jpeg"),
},
{
id: 2,
src:require("../img/a1.jpeg"),
},
{
id: 20,
src:require("../img/a1.jpeg"),
},
]
const imgFilter= IMGS.filter((img) => img.id >= 18 && img.id < 30)
{imgFilter.map(p => {
return <img key={p.id} src={p.src} />;
})}
这篇关于如何使用来自 javascript 数组的图像使用过滤器和映射函数做出反应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!