【发布时间】：2018-07-11 03:34:52
【问题描述】：
我正在尝试从 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
【问题讨论】：
-
JSON.parse 是 javascript 而不是 jquery ！
-
是的，但我似乎无法让它工作
-
我想做的是为每个项目添加一个新的 li 和路由，但我想动态地做。
-
@aoppenh，请把
ProjectListJS.js文件放在这里。 -
在任何地方将
JSON.parse(ProjectList)更改为ProjectList。import ProjectList from './ProjectList.json'将导入该文件并且它已经是对象 - 无需解析。
标签： javascript html json reactjs react-router-dom