0

我试图找出根据我的服务器接收到的数据动态选择组件和存储的最佳方法。该应用程序基于以下示例：https ://github.com/yahoo/flux-examples/tree/master/fluxible-router但略有不同：

  1. 用户访问 mysite.com/that/and/that（应用程序无法知道 'that/and/that' 是什么类型的东西，因此无法在路由中处理）。
  2. 服务器向我们的 CMS 发出 GET 请求。CMS返回数据，包括它是什么类型的数据（栏目列表、文章、公司简介等）

  3. 在这里，我可以像这样动态选择一个组件（目前这是在父组件的渲染方法中）：

    switch (this.props.documentType) { // From the CMS
    case 'Section':
        Handler = require('../section/section');
        break;
    case 'Article':
        Handler = require('../article/article');
        break;
    default:
        // Do nothing
}

都好。但我也想把我的数据放在一个特定的商店里。最好的方法是什么？一些对我来说似乎有点 hacky 的想法：

  1. 在同一个 switch 语句中，动态执行一个动作以将数据发送到适当的存储，'article' 组件将依赖于具有数据的 'article' 存储。

  2. 将数据发送到组件本身并让（例如）文章组件使用该数据初始化文章存储。

  3. 实际上将文档类型放在 URL 中，例如 mysite.com/article/this/and/that并在路由中巧妙地处理所有这些。但我宁愿不要仅仅因为我无法找到一个优雅的解决方案而弄乱我的 URL :)

提前感谢您的任何想法。

4

1 回答 1

1

这是让 React 渲染在服务器上完全同步的一个不幸的限制：关于渲染哪些组件的决定发生得太晚，以至于您无法提前加载数据。出于这个原因，我们经常将要渲染哪个组件的决定移到父组件之外，而是使映射静态（通过配置）或由操作执行的单独方法。通过这种方式，动作调用函数或检查静态映射，确定将使用哪一个，然后调用另一个动作来获取数据。然后该操作可以将要使用的数据和组件分派到商店。然后组件从存储中获取子元素并动态呈现它。

这不是一个理想的解决方案，它可能违反了一些 Flux 原则，但它是我们发现的唯一可以让我们在服务器上正确动态加载组件的方法。

于 2015-05-11T22:23:11.613 回答