我正在尝试从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": ""
}
}
}
ProjectList.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
最佳答案
将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": ""
}
}
]