구성 요소에 모델 데이터 노출

Question

학습 ReactJS. 구성 요소에 표시 할 레코드가 두 개 있지만 만들 방법이 확실하지 않습니다. 내가 가진 :

toy_conroller.rb

class ToyController < ApplicationController 
    def index 
    @users = User.all 
    render component: 'usersList', props: { users: @users } 
    end 
end 

과 같다 구성 요소 :

var usersList = React.createClass({ 
    propTypes: { 
    name: React.PropTypes.string, 
    age: React.PropTypes.number, 
    country: React.PropTypes.string, 
    }, 

    render: function() { 
     return (
      <div> 
      <h3>User List :D</h3> 
      <table style={{border: 1}}> 
       <thead> 
       <tr> 
        <th>Name</th> 
        <th>Age</th> 
        <th>Country</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td>{this.props.name}</td> 
        <td>{this.props.age}</td> 
        <td>{this.props.country}</td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
      ); 
    } 
}); 

는 어떻게 모델 데이터가 보여합니까

userList.js.jsx 나의 페이지? 콘솔에 내 데이터의 JS 개체가 표시되지만 표에 표시하는 방법을 모르겠습니다.

this.props.users 객체의 배열입니다

Answer 1

, 당신은 모든 항목을 통해 루프를 필요로하고 각에서 데이터를 얻을

var UsersList = React.createClass({ 
 
    propTypes: { 
 
    users: React.PropTypes.array 
 
    }, 
 

 
    render: function() { 
 
    var users = this.props.users.map(function (user) { 
 
     return <tr key={ user.id }> 
 
     <td>{ user.name }</td> 
 
     <td>{ user.age }</td> 
 
     <td>{ user.country }</td> 
 
     </tr>; 
 
    }, this); 
 

 
    return <div> 
 
     <h3>User List :D</h3> 
 
     <table style={{border: 1}}> 
 
     <thead> 
 
      <tr> 
 
      <th>Name</th> 
 
      <th>Age</th> 
 
      <th>Country</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      { users } 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    } 
 
}); 
 

 
var users = [ 
 
    { id: 1, name: 'name', age: 'age', country: 'country' }, 
 
    { id: 2, name: 'name-1', age: 'age-1', country: 'country-1' }, 
 
] 
 

 
ReactDOM.render(
 
    <UsersList users={ users } />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>