IT技术 - 如何使用来自 javascript 数组的图像使用过滤器和映射函数做出react - 吾爱随笔录

我有一个这样的 javascript 数组：

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;

还有更多的图像，我只是展示了其中的一些，我需要从这个数组中显示所有的react图像。条件是image_id应该>=18但是<30。我怎样才能做到这一点？（我需要知道语法）。

我知道我可以使用filter或map函数来做到这一点，实际上我是来自 c++、python 背景的 javascript 的新手。对我来说看起来有点混乱。请帮忙！这是我渲染它的react代码

<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} />; })}

const IMGS = [ { id: 0, path: "../img/a1.jpeg", }, { id: 1, path: "../img/a1-01.jpeg", }, { id: 2, path: "../img/a1-02.jpeg", }, { id: 20, path: "../img/a1-03.jpeg", }, ] const res = IMGS.filter((img) => img.id >= 18 && img.id < 30) console.log(res)