将 JSON 文件中的项目数据动态加载到 React
Posted
技术标签:
【中文标题】将 JSON 文件中的项目数据动态加载到 React【英文标题】：Dynamically Load Project Data from JSON file into React 【发布时间】：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` />
</span>
</div>
)
export default ProjectListJS
【问题讨论】：
JSON.parse 是 javascript 而不是 jquery ！ 是的，但我似乎无法让它工作 我想做的是为每个项目添加一个新的 li 和路由，但我想动态地做。 @aoppenh，请把ProjectListJS.js文件放在这里。
在任何地方将 JSON.parse(ProjectList) 更改为 ProjectList。 import ProjectList from './ProjectList.json' 将导入该文件并且它已经是对象 - 无需解析。
【参考方案1】：
将它们作为对象数组，将它们导入组件中，然后循环遍历它们。像这样将每个项目呈现为列表项。
将它们导入您的组件中
import Projects from './Projects'
const projects = Projects
projects.map((project, i) => <Component i=i key=i project=project />)
JSON 文件
export const Projects =
[ "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": ""
]
【讨论】：
【参考方案2】：处处将 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": ""
]
【讨论】：
以上是关于将 JSON 文件中的项目数据动态加载到 React的主要内容，如果未能解决你的问题，请参考以下文章
jquery easyui combobox如何动态加载.json数据
如何将资产文件夹中的 JSON 数据加载到 Recyclerview
将抽象数据类型保存和加载到 json 文件并从游戏中的文件中读取 Haskell