如何使用来自 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屋！