如何在 reactjs 中渲染 JSON 数据?
How to render JSON data in reactjs?
这是我的 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)渲染到屏幕上(在无序列表中)?请提供代码。
提前致谢。
应该这样做:
<ul>
{Data.map(x => <li>{x.name.first}</li>)}
</ul>
你可以像这样使用 ES6 来完成。
import {Data} from './path/to/people.json'
然后映射它。
Dara.map(person => console.log(person.name))
这是我的 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)渲染到屏幕上(在无序列表中)?请提供代码。
提前致谢。
应该这样做:
<ul>
{Data.map(x => <li>{x.name.first}</li>)}
</ul>
你可以像这样使用 ES6 来完成。
import {Data} from './path/to/people.json'
然后映射它。
Dara.map(person => console.log(person.name))