React Router：无法将道具传递给 activeRouteHandler答案

【问题标题】：React Router: cannot pass props to activeRouteHandlerReact Router：无法将道具传递给 activeRouteHandler
【发布时间】：2014-11-19 14:08:16
【问题描述】：

我正在尝试将一些道具传递给我处理的组件，但是 react-router 未能这样做。

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>
);

路由器加载正常，因为我现在可以在 url 中看到“#/”。 Left nav 可以很好地渲染并更新状态。但是在传递的组件即objectHandler中没有props.selected。我在这里错过了什么吗？谢谢。

我正在使用 react-router 0.7.0

【问题讨论】：

标签： javascript reactjs react-jsx react-router

【解决方案1】：

尝试将“objectHandler”的 DefaultRoute 设为另一个将“Objects”定义为处理程序的路由的子级。如：

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

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

【讨论】：

【解决方案2】：

我现在用的是这样的。

仅路由到App 组件的顶级路由：

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

App 组件如下所示。我将Container 传递给所有子路由（即TodoList 路由）。此容器包含待办事项列表（以及我在应用程序中需要的任何其他内容，包括添加/保留新待办事项的方法）。这有助于将状态保持在顶层和解耦子组件。由于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 的解决方案稍微复杂一些，但可以完成这项工作并带来一些额外的好处。

【讨论】：