javascript - 将项目数据从 JSON 文件动态加载到 React 中

Question

我正在尝试从 JSON 文件加载项目列表，并将它们显示为包含可以选择的 li 的列表。注释部分是我之前的做法，但我想这样做，而不必每次向 JSON 文件添加项目时都添加新的 li 和新的 Route。我想在没有 JQuery 的情况下做到这一点。我所能找到的就是如何使用 JQuery 解析 JSON 数据。

import React, { Component } from 'react'
import { Switch, Route, NavLink } from 'react-router-dom'
import ProjectListJS from './ProjectListJS'
import ProjectList from './ProjectList.json'
import './Projects.css'

class Projects extends Component {
    render() {
        return (
            <div className="projects">
                <div className="block">
                    <table>
                        <tbody>
                            <td>
                                <ul className="list" id="spanned">
                                    {JSON.parse(ProjectList).map(function(currProject){
                                        return (
                                            <li key={currProject.id}>
                                                <NavLink to={`/aoppenh/projects/${currProject.projectName}`}>{currProject.projectName}</NavLink>
                                            </li>
                                        )
                                    })}
                                    {/*<li>
                                        <NavLink to={`/aoppenh/projects/${ProjectList.project1.projectName}`}>{ProjectList.project1.projectName}</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to={`/aoppenh/projects/${ProjectList.project2.projectName}`}>{ProjectList.project2.projectName}</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to={`/aoppenh/projects/${ProjectList.project3.projectName}`}>{ProjectList.project3.projectName}</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to={`/aoppenh/projects/${ProjectList.project4.projectName}`}>{ProjectList.project4.projectName}</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to={`/aoppenh/projects/${ProjectList.project5.projectName}`}>{ProjectList.project5.projectName}</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to={`/aoppenh/projects/${ProjectList.project6.projectName}`}>{ProjectList.project6.projectName}</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to={`/aoppenh/projects/${ProjectList.project7.projectName}`}>{ProjectList.project7.projectName}</NavLink>
                                    </li>*/}
                                </ul>
                            </td>
                            <td>
                            <Switch id="spanned">
                                {JSON.parse(ProjectList).map(function(currProject){
                                    return (
                                        <Route path={`/aoppenh/projects/${currProject.projectName}`}><ProjectListJS currentProject={currProject} /></Route>
                                    )
                                })}
                                {/*<Route path={`/aoppenh/projects/${ProjectList.project1.projectName}`}><ProjectListJS currentProject={ProjectList.project1} /></Route>
                                <Route path={`/aoppenh/projects/${ProjectList.project2.projectName}`}><ProjectListJS currentProject={ProjectList.project2} /></Route>
                                <Route path={`/aoppenh/projects/${ProjectList.project3.projectName}`}><ProjectListJS currentProject={ProjectList.project3} /></Route>
                                <Route path={`/aoppenh/projects/${ProjectList.project4.projectName}`}><ProjectListJS currentProject={ProjectList.project4} /></Route>
                                <Route path={`/aoppenh/projects/${ProjectList.project5.projectName}`}><ProjectListJS currentProject={ProjectList.project5} /></Route>
                                <Route path={`/aoppenh/projects/${ProjectList.project6.projectName}`}><ProjectListJS currentProject={ProjectList.project6} /></Route>
                                <Route path={`/aoppenh/projects/${ProjectList.project7.projectName}`}><ProjectListJS currentProject={ProjectList.project7} /></Route>*/}
                            </Switch>
                            </td>
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }
}

export default Projects

JSON 文件

{
    "project1": {
        "id": 1,
        "projectName": "Website",
        "blockLeft": {
            "title": "This Website",
            "body": "My personal website craeted using the skills taught to me by Davey Strus & Seth Baughman of Fretless during Techpoint Xtern-Bootcamp 2017 session 2",
            "link": "https://github.com/aoppenh/aoppenh"
        },
        "blockRight": {
            "img": "./images/website.GIF"
        }
    },

    "project2": {
        "id": 2,
        "projectName": "IRCClient",
        "blockLeft": {
            "title": "IRCClient",
            "body": "An irc client that works over local host created as a project at Purdue University in cs24000 - Programming in C",
            "link": "https://github.com/aoppenh/IRCClient"
        },
        "blockRight": {
            "img": ""
        }
    },

    "project3": {
        "id": 3,
        "projectName": "IRCServer",
        "blockLeft": {
            "title": "IRCServer",
            "body": "An irc server that works over local host created as a project at Purdue University in cs24000 - Programming in C",
            "link": "https://github.com/aoppenh/IRCServer"
        },
        "blockRight": {
            "img": ""
        }
    },

    "project4": {
        "id": 4,
        "projectName": "Jeffervescence",
        "blockLeft": {
            "title": "Jeffervescence",
            "body": "A website made during Xtern bootcamp session 2 that lists Jeff Goldblum movies, release year, and allows the user to favorite movies, reorder, delete, and clear the list",
            "link": "https://github.com/aoppenh/Jeffervescence"
        },
        "blockRight": {
            "img": ""
        }
    },

    "project5": {
        "id": 5,
        "projectName": "Password Generator",
        "blockLeft": {
            "title": "Password Generator",
            "body": "A password generator that takes user customizations and generates a fully-random or a pseudo-random password",
            "link": "https://github.com/aoppenh/PasswordGenerator"
        },
        "blockRight": {
            "img": ""
        }
    },

    "project6": {
        "id": 6,
        "projectName": "API-Party",
        "blockLeft":{
            "title": "API-Party",
            "body": "Implemented functionality using the Pokéapi v1, worked on as part of Xtern-Bootcamp 2017 session 2",
            "link": "https://github.com/aoppenh/api-party"
        },
        "blockRight":{
            "img": ""
        }
    },

    "project7": {
        "id": 7,
        "projectName": "2x4 Decoder",
        "blockLeft": {
            "title": "2x4 Decoder",
            "body": "Constructed for CS25000, on a breadboard, a 2x4 Decoder as active-low and assert when low",
            "link": null
        },
        "blockRight": {
            "img": ""
        }
    }
}

项目列表.js这是我在 Project.js 中显示项目列表后用来显示项目数据的组件。当我使用注释部分加载项目列表时，该组件可以工作，但我的问题是动态加载列表，但如果您想了解整个事情如何工作，如果它改变了您的答案。

import React, { Component } from 'react'
import ProjectList from './ProjectList.json'

class ProjectListJS extends Component {
    constructor(props) {
        super(props)

        this.state = {
            currentProject: props.currentProject,
            projects: ProjectList,
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ currentProject: nextProps.currentProject })
    }

    render() {
        return (
            <div>
                <span className="block-left" id="div">
                    <div className="block-top">
                        {(this.state.currentProject === null) ? null : this.state.currentProject.blockLeft.title}
                    </div>
                    <div className="block-bottom">
                        {(this.state.currentProject === null) ? null : this.state.currentProject.blockLeft.body}
                    </div>
                    <a href={(this.state.currentProject === null) ? null : this.state.currentProject.blockLeft.link} target="_blank" className="link">
                        {(this.state.currentProject === null) ? null : this.state.currentProject.blockLeft.link}
                    </a>
                </span>
                <span className="block-right" id="div">
                    <img id="tech" src={`${(this.state.currentProject === null) ? null : this.state.currentProject.blockRight.img}`} alt="img" />
                </span>
            </div>
        )
    }
}

export default ProjectListJS

Answer 1

将 JSON.parse(ProjectList) 更改为各处的 ProjectList。从 './ProjectList.json' 导入 ProjectList

然后更改ProjectList.map

到

ProjectList.forEach

然后更改./ProjectList.json

如下:-

[
  {
        "id": 1,
        "projectName": "Website",
        "blockLeft": {
            "title": "This Website",
            "body": "My personal website craeted using the skills taught to me by Davey Strus & Seth Baughman of Fretless during Techpoint Xtern-Bootcamp 2017 session 2",
            "link": "https://github.com/aoppenh/aoppenh"
        },
        "blockRight": {
            "img": "./images/website.GIF"
        }
    },

     {
        "id": 2,
        "projectName": "IRCClient",
        "blockLeft": {
            "title": "IRCClient",
            "body": "An irc client that works over local host created as a project at Purdue University in cs24000 - Programming in C",
            "link": "https://github.com/aoppenh/IRCClient"
        },
        "blockRight": {
            "img": ""
        }
    },

     {
        "id": 3,
        "projectName": "IRCServer",
        "blockLeft": {
            "title": "IRCServer",
            "body": "An irc server that works over local host created as a project at Purdue University in cs24000 - Programming in C",
            "link": "https://github.com/aoppenh/IRCServer"
        },
        "blockRight": {
            "img": ""
        }
    },

   {
        "id": 4,
        "projectName": "Jeffervescence",
        "blockLeft": {
            "title": "Jeffervescence",
            "body": "A website made during Xtern bootcamp session 2 that lists Jeff Goldblum movies, release year, and allows the user to favorite movies, reorder, delete, and clear the list",
            "link": "https://github.com/aoppenh/Jeffervescence"
        },
        "blockRight": {
            "img": ""
        }
    },

    {
        "id": 5,
        "projectName": "Password Generator",
        "blockLeft": {
            "title": "Password Generator",
            "body": "A password generator that takes user customizations and generates a fully-random or a pseudo-random password",
            "link": "https://github.com/aoppenh/PasswordGenerator"
        },
        "blockRight": {
            "img": ""
        }
    },

     {
        "id": 6,
        "projectName": "API-Party",
        "blockLeft":{
            "title": "API-Party",
            "body": "Implemented functionality using the Pokéapi v1, worked on as part of Xtern-Bootcamp 2017 session 2",
            "link": "https://github.com/aoppenh/api-party"
        },
        "blockRight":{
            "img": ""
        }
    },

     {
        "id": 7,
        "projectName": "2x4 Decoder",
        "blockLeft": {
            "title": "2x4 Decoder",
            "body": "Constructed for CS25000, on a breadboard, a 2x4 Decoder as active-low and assert when low",
            "link": null
        },
        "blockRight": {
            "img": ""
        }
    }
]