Question

我正在尝试将一些道具传递给我处理过的组件，但是反应路由器却没有这样做。

var Objects = React.createClass({
    getInitialState: function() {
        return {
            selected: "All"
        }
    },
    select: function(opt) {
        this.setState({
            selected: opt
        });
    },
    render: function() {

        return (
            <div>
                <LeftNav select={this.select} />
                <this.props.activeRouteHandler selected={this.state.selected} />
            </div>
        );
    }
});



var routes = (
    <Routes>
        <DefaultRoute name="objects" handler={objecctHandler}/>
    </Routes>
);

路由器加载正常，因为我现在可以在网址中看到“＃/”。左导航渲染正常并更新状态。但是handeded组件中没有props.selected即objectHandler。我在这里错过了什么吗？谢谢。

我正在使用react-router 0.7.0

Answer 1

尝试为＆＃39; objectHandler＆＃39;制作DefaultRoute另一条定义“物体”的路线的孩子。作为处理程序。如：

var routes = (
    <Routes>
        <Route handler={Objects}>
            <DefaultRoute name="objects" handler={objectHandler}/>
        </Route>
    </Routes>
);

jsfiddle：http://jsfiddle.net/gq1uym5y/1/

Answer 2

我现在使用的是这样的。

只是路由到App组件的一个顶级路由：

React.renderComponent(
    <Routes>
        <Route handler={App}>
            <Route path="/todos" handler={TodoList} />
        </Route>
    </Routes>
, mountNode);

App组件如下所示。我将Container传递给所有子路由（即到TodoList路由）。此容器包含待办事项列表（以及我在应用程序中需要的任何其他内容，包括添加/保留新Todos的方法）。这有助于保持顶级状态和解耦子组件。由于App组件用于每个路由，因此它永远不会卸载，因此它不会松动其状态。

var Container = function(app) {
    return {
        getTodos: function() {
            return app.state.todos;
        }
    };
};

var App = React.createClass({
    getInitialState: function() {
        return {
            todos: ['Buy milk', 'Call Mike']
        };
    },

    componentWillMount: function() {
        this.container = Container(this);
    },

    render: function() {
        return <this.props.activeRouteHandler container={this.container} />;
    }
});

这是TodoList的样子。它实际上有两个组成部分：TodoList和TodoListInner。 TodoListInner仍然干净且可测试。 TodoList本身并不是那么容易测试，但由于它只是包裹内部组件，所以这不应该是一个很大的问题。

var TodoListInner = React.createClass({
    render: function() {
        <ul>
            {this.props.todos.map(function(todo) {
                return <li>{todo}</li>;
            })}
        </ul>
    }
})

var TodoList = React.createClass({
    render: function() {
        <TodoListInner todos={this.props.container.getTodos()} />
    }
});

它比jsmiff的解决方案稍微复杂一点，但是可以带来一些额外的好处。

React Router：无法将props传递给activeRouteHandler

2 个答案: