1

我正在尝试将一些道具传递给我处理的组件，但是 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。我在这里错过了什么吗？谢谢。

我正在使用反应路由器 0.7.0

4

2 回答 2

1

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

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

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

于 2014-09-25T14:34:02.727 回答
0

我现在使用的是这样的。

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

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

该App组件看起来像这样。我将 a 传递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 的解决方案稍微复杂一些，但它的工作还带来了一些额外的好处。

于 2014-10-25T23:03:46.263 回答