0

我刚开始，所以我不知道这是理想的行为还是我错过了什么。我正在使用 Flux 架构（特别是 Reflux，但这不应该是相关的）。在我的超级简单的测试应用程序中：

var App = React.createClass({
    render: function () {
        return (
            <div className="container">
                <Header />
                <RouteHandler />
            <div>
        );
    }
});

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="employees" handler={Employees}/>
        <Route name="company" handler={Company}/>
        <Route name="timesheets" handler={Timesheets}/>
        <DefaultRoute handler={Company} />
    </Route> 
);

Router.run(routes, function (Handler) {
    React.render(<Handler/>, document.getElementById('main'));
});

处理程序是 React 组件，是最简单的设置。当应用程序启动时，我按预期登陆“公司”页面。然后，当我转换为“员工”时，一切都很好，但是当我转换回“公司”时，我观察到创建了一个全新的 {Company} 组件，从而使我的状态消失了。这将导致许多不必要的 API 调用，除非我做错了什么或不理解。

有没有办法告诉 Route 使用现有的处理程序（如果存在）并重新渲染它？而不是创建一个新类？

4

1 回答 1

0

将状态保存在通量存储中

一种解决方案是将状态保存在通量存储中。当组件被挂载时，从getInitialState()函数中的存储请求数据。

将状态保存在父组件中

如果您不想使用通量存储（因为它增加了简单示例的复杂性），我建议将状态保留在父组件中，并将其作为道具传递给您。

当然，这只有在您的父组件没有被卸载时才有效。我相信您示例中的根组件<Handler />应该在您的示例中的状态转换之间保持挂载。

我建议您查看本教程，了解如何将道具传递给子组件。

本教程介绍了如何从孩子与父母沟通。

于 2015-03-03T12:13:06.413 回答