如何在 React 中拥有 js 数组和 img src 的链接答案

【问题标题】：How to have a link of js array and img src in React如何在 React 中拥有 js 数组和 img src 的链接
【发布时间】：2026-01-25 02:30:01
【问题描述】：

我有一个 React 组件，它映射来自 .js 文件的数据，其中包含数组中的对象。如何在此功能中链接我的标题和图像以访问相应的页面？

在这个文件中，用于将 img src 链接到 info.js 文件的每个 [x] 都会出现错误有没有其他方法可以从 js 数组中链接 img？

import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import Card from "./Card";
import Btt from "./BackToTop";
import info from "../info";

function Bolt() {
    return(
        <div>
            <Header />
            <div>
            <h1 className="projHead">Bolt</h1>
            <div className="card-img-top"><img src={info.[1].src} alt="" className="banner"></img> 
            </div>
            </div>

            <div className="text1">
                <h3>Mind Map</h3>
            </div>
            <div className="card-img-top"><img src={info.[1].pic1} alt="" className="isoimg"></img></div>

            <div className="card-img-top"><img src={info.[1].pic2} alt="" className="isoimg"></img></div>

            <div className="card-img-top"><img src={info.[1].pic3} alt="" className="isoimg"></img></div>

            <div className="card-img-top"><img src={info.[1].pic4} alt="" className="isoimg"></img></div>

            <div className="text1">
                <h3>Screen Layouts</h3>
            </div>
            <div className="card-img-top"><img src={info.[1].pic5} alt="" className="isoimg"></img></div>

            <div className="text1">
                <h3>Mockups</h3>
            </div>
            <div className="card-img-top"><img src={info.[1].pic6} alt="" className="smallisoimg"></img></div>

            <Btt />   
            <Footer />
        </div>
    );
}

export default Bolt;

这是内容的 JS 文件

const info = [
    {
        id:    1,
        title: "AR mirror",
        about: "Smart Exercise Mirror is an IOT product. It helps the user to have a gym-like experience at their home with the help of AR and image recognition technology. ",
        src:   "images/AR_Mirror/AR_mirror.png",
        tag1: "UX & Product design",
        link: "/ARmirror",
        targ: "_self",
        pic1: "images/AR_Mirror/ar1.jpg",
        pic2: "images/AR_Mirror/ar2.png",
        pic3: "images/AR_Mirror/ar3.png",
        pic4: "images/AR_Mirror/ar4.png",
        pic5: "images/AR_Mirror/ar5.gif",
        pic6: "images/AR_Mirror/ar6.png",
        vid: "images/AR_Mirror/AR_mirror.MOV",
    },

    {
        id:    2,
        title: "Bolt",
        about: "Bolt is an app for electric bikes which allows user to monitor the bike from remote distance and functions as a control panel.",
        src:   "images/Bolt/Bolt.jpg",
        tag1: "UX design",
        link: "/Bolt",
        targ: "_self",
        pic1: "images/Bolt/bs1.png",
        pic2: "images/Bolt/bs2.png",
        pic3: "images/Bolt/bs3.png",
        pic4: "images/Bolt/bs4.png",
        pic5: "images/Bolt/bs5.png",
        pic6: "images/Bolt/bs6.gif",
    }
    
];

export default info;

【问题讨论】：

您可以发送错误信息吗？
上述代码有哪些具体错误或问题？

标签： javascript arrays reactjs

【解决方案1】：

我相信，这种语法 (info.[1]) 是错误的。这就是你有错误的原因。您应该将其更改为info[1]。这是通过索引访问数组元素的正统方式。

除此之外，您最好使用map 或foreach 遍历数组。

【讨论】：

谢谢，@marmeladze 这个解决方案有效。也会尝试地图的东西

【解决方案2】：

在这种情况下，只需替换

info.[1].pic1

到

info?.[1]?.pic1

如果你是静态的，那就没问题了。但是将来如果您使用更多数据，最好使用 For-loop 或 Map，因为它是使用数组数据的更好方法

【讨论】：