如何在React中擁有js陣列和imgsrc的鏈接-有解無憂

我有一個 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;

uj5u.com熱心網友回復：

我相信，這種語法 ( info.[1]) 是錯誤的。這就是為什么你有錯誤。您應該將其更改為info[1]. 這是通過索引訪問陣列元素的正統方式。

除此之外，您應該更好地使用map或foreach迭代陣列。

uj5u.com熱心網友回復：

在這種情況下，只需更換

info.[1].pic1

到

info?.[1]?.pic1

如果你這樣做是靜態的，那很好。但是將來如果您使用更多資料，最好使用 For-loop 或 Map，因為它是使用陣列資料的更好方法

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/362754.html

標籤：javascript 数组反应

上一篇：與JSX.Element反應useState

下一篇：單擊時切換元素