React Router:无法将props传递给activeRouteHandler

React Router: cannot pass props to activeRouteHandler

本文关键字：activeRouteHandler props Router React      更新时间：2023-09-26

我正试图将一些道具传递给我处理过的组件，但react路由器未能做到这一点。

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中看到"#/"。左侧导航渲染良好，并更新状态。然而，在handed组件（即objectHandler）中没有props.selected。我是不是遗漏了什么？谢谢

我使用的是react路由器0.7.0

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

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

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

我现在使用的是这样的东西。

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

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

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

相关文章：
  • 没有找到相关文章