React JS中如何通过按钮绑定map渲染逻辑？图片路径能否直接写入数组？

实现方案 #

1. 点击按钮展示对应内容的实现逻辑

你可以按以下步骤修改代码：

• 引入React的useState钩子，存储当前选中的设施ID，默认可以设置为第一个项的ID
• 按钮区域直接通过facsInfo数组遍历渲染，绑定点击事件更新选中ID
• 内容渲染区域不再遍历整个数组，仅筛选出和当前选中ID匹配的项渲染即可

2. 图片路径的使用说明

• 若你的Images文件夹放在项目public目录下，直接把相对路径写在数组中是可以正常加载的
• 若Images文件夹放在src目录下，不能直接使用字符串路径，有两种解决方法：
  • 提前import所有图片，再把导入的变量赋值给数组对应字段
  • 路径用require包裹，示例：upperleftimg: require('../Images/photo1.png')

修改后的完整代码 #

import React, { useState } from 'react';
import {Carousel, Container, Row, Col} from 'react-bootstrap'
import '../CSS/Facilities.css'

// 已补全Meeting Room对应结构，你可自行替换实际内容
const facsInfo = [
    {
        Id: "1",
        Title: "De'Spa",
        Description: "",
        upperleftimg:"./Images/photo1.png",
        upperrightimg:"./Images/photo2.png",
    },
    {
        Id: "2",
        Title: "De'Resto",
        Description: "",
        upperleftimg:"./Images/photo3.png",
        upperrightimg:"./Images/photo4.png",
    },
    {
        Id: "3",
        Title: "Meeting Room",
        Description: "",
        upperleftimg:"./Images/photo5.png",
        upperrightimg:"./Images/photo6.png",
    }
]

const Facilities = () => {
    // 声明选中状态，默认展示第一个设施
    const [activeId, setActiveId] = useState("1");
    // 筛选出当前选中的设施数据
    const activeFac = facsInfo.find(item => item.Id === activeId);

    return (
        <>
            <Container fluid>
                <Row className="facsbuttwrapper text-center">
                    {/* 遍历数组渲染按钮 */}
                    {facsInfo.map(item => (
                        <Col sm={4} lg={4} key={item.Id}>
                            <button 
                                className="facsButton"
                                onClick={() => setActiveId(item.Id)}
                            >
                                {item.Title}
                            </button>
                        </Col>
                    ))}
                </Row>
            </Container>

            <Container fluid>
                <Row className="text-center">
                    <Col md={12} lg={12}>
                        {/* 直接渲染选中项的内容 */}
                        <div>
                            <h1>{activeFac.Title}</h1>
                            <h5>{activeFac.Description}</h5>
                        </div>
                    </Col>
                </Row>
            </Container>

            <Container fluid>
                <Row>
                    <Col md={12} lg={12}>
                        <div className="FacilitiesImg">
                            <img src={activeFac.upperleftimg} alt="Image 1"></img>
                            <img src={activeFac.upperrightimg} alt="Image 2"></img>
                        </div>
                    </Col>
                </Row>
            </Container>
        </>
    )
}

export default Facilities

内容的提问来源于stack exchange，提问作者Kim San