javascript - 如何在 React JS 中为图像使用映射

Question

大家好，我正在尝试使用 React JS 制作一些关于酒店房间信息的网页，我想根据用户选择的房间类型更改页面的名称、描述和图像。但我不知道如何映射图像，有人可以帮我做映射吗？我还没有制作按钮标签来更改房间类型。

这是我的 room.js 代码：

import React from 'react'
import {Row, Col, Container} from "react-bootstrap"

const RoomInfo = [
  {
    MainPhoto:"",
    RoomType:"Superior Twin",
    RoomDescription:"",
    LittlePhoto:'Photo1.jpg'
  },
  {
    MainPhoto:"",
    RoomType:"Double Room Twin",
    RoomDescription:"",
    LittlePhoto:'Photo1.jpg'
  },
]
const Room = () => {
    return (
      <>
        <Container fluid={true} className="p-0">
          <Row>
            <Col>
              <h1 className="text-center"> Check out our room</h1>
            </Col>
          </Row>
        </Container>
      </>
    )
}

export default Room

标签： javascriptreactjsreact-bootstrap

Answer 1

您可以使用这样的地图数组来渲染数组中的元素：

...
<h1 className="text-center"> Check out our room</h1>
{
  RoomInfo.map((item, i) => {
    return (
      <div key={i}>
        <img src={item.LittlePhoto} />
      </div>
    );
  });
}
...