Question

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

Sails 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

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

var App = React.createClass({

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

});

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

Sails-React：从父组件访问道具

1 个答案: