将 JSON 文件中的项目数据动态加载到 React 中

Question

我正在尝试从 JSON 文件加载项目列表，并将它们显示为一个列表，其中包含可供选择的列表。注释部分是我以前的做法，但我想这样做而不必每次向 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

Answer 1

将它们作为一个对象数组，将它们导入到您的组件中，然后循环遍历它们。像这样将每个项目呈现为列表项。

import them in your component

import { Projects } from './Projects'
const projects = Projects


{ projects.map((project, i) => <Component i={i} key={i} project={project} />) }

JSON file

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": ""
            }
        }
    ]

Answer 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 中

Dynamically Load Project Data from JSON file into React

html

javascript

json

reactjs

react-router-dom