2015-10-23 110 views
1

我正在開發一個使用Sails和React的Web應用程序。我試圖從我的數據庫中獲取所有用戶。所以,讓所有的用戶,我寫了下面的代碼Sails-React:從父組件訪問道具

帆UserController的

index : function(req,res){ 

    User.find() 
     .then(function(users){ 

      renderTo(routes, req.wantsJSON, res, "/user" , {title: 'Users'}, {'users' : users}); 

     }).catch(function(err){ 
      return res.negotiate(err); 

     }); 
} 

現在,接收用戶的陣列,我的陣營代碼:

陣營代碼

var React = require('react'); 
var http = require('http'); 
var UserList = require('./userList'); 

var user = React.createClass({ 

    render: function() { 

     return (<UserList {...this.props} />); 
    } 

}); 

module.exports = user; 

UserList Component

var React = require('react'); 

var userList = React.createClass({ 


    render: function() { 
     var createUserRow = function(user){ 
      return (<tr key={user.id}> 
         <td>{user.id}</td> 
         <td>{user.firstName}</td> 
         <td>{user.lastName}</td> 
         <td>{user.email}</td> 
        </tr>); 
     }; 

     return (
      <div> 
       <table className="table table-stripped table-hover"> 
        <thead> 
         <th>Id</th> 
         <th>First Name</th> 
         <th>Last Name</th> 
         <th>Email</th> 
        </thead> 

        <tbody> 
         {this.props.users.map(createUserRow)} 
        </tbody> 
       </table> 
      </div> 
     ); 
    } 

}); 

module.exports = userList; 

而且我得到的expected..But它的未來是這樣的反應:

enter image description here

所以我的問題是,我如何通過用戶列表我UserList Component ,它在圖像中顯示的父組件上可用。

回答

1

最後,拿到了answer..All我要做的就是,通過擴展屬性(...this.props)反應,路由器的RouteHandler這樣的:

var App = React.createClass({ 

    render: function() { 
     return (
      <div> 
       <Header/> 
       <RouteHandler {...this.props}/> 
      </div> 
     ); 
    } 

}); 

希望這helps..if人所面臨的類似問題。