如何在 reactjs 中渲染 JSON 数据？

Question

这是我的 people.js file.It 包含两个人的数据。

var Data = [
        {
            "gender": "male",
            "name": {
              "title": "mr",
              "first": "ruben",
              "last": "dean"
            },
            "location": {
              "street": "3070 york road",
              "postcode": "LP0 5PG"
            },
            "email": "ruben.dean@example.com",
            "login": {
              "username": "crazydog764",
              "password": "kane",
              "sha256": "58841f853bffca51507549428aee2a6c14863c8219e5a4b563d58a5b97564c92"
            },
            "picture": {
              "large": "https://randomuser.me/api/portraits/men/96.jpg",
              "thumbnail": "https://randomuser.me/api/portraits/thumb/men/96.jpg"
            },
            "nat": "GB"
        },
        {
            "gender": "male",
            "name": {
              "title": "mr",
              "first": "daniel",
              "last": "king"
            },
            "location": {
              "street": "7618 taylor st",
              "postcode": 35059
            },
            "email": "daniel.king@example.com",
            "login": {
              "username": "silvergorilla983",
              "password": "1a2b3c4d",
              "sha256": "df4eeb09df18d02d7fa49534a2cd6a03587d361f17aa7596d8ed7c025c5cb4d4"
            },
            "picture": {
              "large": "https://randomuser.me/api/portraits/men/21.jpg",
              "thumbnail": "https://randomuser.me/api/portraits/thumb/men/21.jpg"
            },
            "nat": "US"
        }
    ]

    module.exports = Data;

这是我的PeopleList.jsx。两个文件都在同一目录中。

var React = require('react');
var Data = require('people');

var PeopleList = React.createClass({
    render: function () {
        return (
            <div>
              <ul>

              </ul>
            </div>
        );
    }
});

module.exports = PeopleList;

谁能告诉我如何将 people.js 文件中的两个名字（Ruben 和 Daniel）渲染到屏幕上（在无序列表中）？请提供代码。

提前致谢。

Answer 1

应该这样做：

<ul>
    {Data.map(x => <li>{x.name.first}</li>)}
</ul>

Answer 2

你可以像这样使用 ES6 来完成。

import {Data} from './path/to/people.json'

然后映射它。

Dara.map(person => console.log(person.name))

如何在 reactjs 中渲染 JSON 数据？

How to render JSON data in reactjs?

reactjs

render

react-dom