时间戳

首页 > 解决方案 > React 中带有地图的独特“关键”道具

reactjs - React 中带有地图的独特“关键”道具

问题描述

每个兄弟姐妹都有一个 id，但仍然不起作用。在第一个 div 中传递了 id，但仍然要求不同的 id。我不明白这里的问题。我的 id 是否被识别并具有良好的类型？或者我需要在这个之前放置另一个只有 id 的 div 吗？

import React from 'react';
import listProjects from "./JSONdata/projects.json"

export default function Project(){
    return(
        <div className="projectList">
        {listProjects.projects.map(project => (
            displayProject(project)
        ))}
        </div>
    )
}

function displayProject(project){
    return(
        <>
            <div className="projectContainer">
                <div className="imgContainer">
                </div>
                <div className="nameProject">
                    <a href={project.gitlabLink}><p>{project.name}</p></a>
                </div>
                <div className="technologiesProject">
                    {
                        project.technologies.map(({techno, id}) =>(
                            <div className={`${techno}Container`} key={id}>
                                <p>{techno}</p>
                            </div>

                        ))
                    }
                </div>
            </div>
        </>
    )
}

来自 JSON 的数据看起来像这样

{
    "projects": [
        {
            "name": "PoE AiO",
            "gitlabLink": "",
            "technologies": [
                {
                    "id": "1",
                    "techno": "html"
                },
                {
                    "id": "2",
                    "techno": "css"
                },
                {
                    "id": "3",
                    "techno": "jquery"
                }
            ]
        },
        {
            "name": "ESO AiO",
            "gitlabLink": "",
            "technologies":[
                {
                    "id": "1",
                    "techno": "html"
                },
                {
                    "id": "2",
                    "techno": "css"
                },
                {
                    "id": "3",
                    "techno": "bootstrap"
                }
            ]
        },

标签： reactjs

解决方案

你可以在 React 中这样做。

import React from 'react';
import listProjects from "./JSONdata/projects.json"
export default function Project(){
    return(
        <div className="projectList">
        {listProjects.projects.map((project, index) => (
            <displayProject project={project} key={index} />
        ))}
        </div>
    )
}


function displayProject({project} ){
    return(
        <>
            <div className="projectContainer">
                <div className="imgContainer">
                </div>
                <div className="nameProject">
                    <a href={project.gitlabLink}><p>{project.name}</p></a>
                </div>
                <div className="technologiesProject">
                    {
                        project.technologies.map(({techno, id}, index) =>(
                            <div className={`${techno}Container`} key={index }>
                                <p>{techno}</p>
                            </div>

                        ))
                    }
                </div>
            </div>
        </>
    )
}

推荐阅读