帆 – 反应：从父组件访问道具

我正在开发一个使用Sails和React的Web应用程序。 我试图从我的数据库中获取所有的用户。 所以，为了让所有的用户，我写了下面的代码

启动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); }); } 

现在，要接收用户数组，我的React代码是：

反应代码

 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组件

 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; 

而且我得到了预期的答复。但它是这样来的：

所以我的问题是，我如何将用户列表传递给我的UserList Component ，该组件在图像中显示的父组件上可用。

Answer 1

最后，得到了答案。我所要做的就是将spread属性(...this.props)传递给React-Router的RouteHandler像这样：

 var App = React.createClass({ render: function() { return ( <div> <Header/> <RouteHandler {...this.props}/> </div> ); } }); 

希望这有助于..如果任何人面临类似的问题。