reactjs에서 JSON 데이터를 렌더링하는 방법은 무엇입니까?

Question

이것은 내 people.js 파일입니다. 두 사람의 데이터가 들어 있습니다.

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에서 두 이름 (루벤 다니엘)를 렌더링하는 방법을 말해 줄래? 코드를 입력하십시오.

미리 감사드립니다.

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))