1

我想构建拆分视图功能，以便用户可以并排查看多个组件。

在我的应用程序的单个视图中，react-router URL 设置如下：

  • /用户身份
  • /聊天/:id
  • /etc/:id

您将如何实现 react-router 以使用拆分视图？

有许多不同的界面，我希望用户能够以任何顺序呈现界面的任何组合。

我正在考虑创建一个 SplitView 组件，它有一个 childrenComponents 道具，它需要一个要渲染的组件数组。我可能会设置 react-router URL，例如：

  • /分裂/

然后在末尾添加一个查询字符串

  • ?views=%5B%7B%22component%22:%22chat%22,%22id%22:%22123%22%7D,%7B%22component%22:%22chat%22,%22id%22:%22456%22 %7D%5D

这是一个编码的、字符串化的 JSON 对象数组

[
    {
        component:'chat',
        id:'foo'
    },
    {
        component:'chat',
        id:'bar'
    }
]

这感觉不是最好的方法，有人有什么建议吗？

更新

在尝试了几种不同的方法后，我发现在没有 react-router 的情况下管理多路由更容易，而只需使用 redux 和经过深思熟虑的状态树。

然而，在我搜索的过程中，我发现了一些很酷的库，它们可以帮助其他有类似问题的人：

4

1 回答 1

1

我认为您的方法可以稍作修改。

在你的路线中声明/split/*，它最终会是这样/split/user/1/basket/2/item/3的。

然后使用此函数获取组件列表：

pathArray = path.split('/').filter(s => (s !=== ''))
path = _.chunk(pathArray, 2) // note lodash usage here

你[['user', '1'], ['basket', '2'], ['item', '3']]现在有了。如果页面上的组件顺序无关紧要，您可以使用 lodashfromPairs获取对象。

在拆分组件中使用类似的东西react-loadable，以防止将所有组件加载到一个块中。

这就是想法

于 2018-06-19T06:27:30.380 回答