React - 如何编写像 Netflix 这样的仅键盘应用程序？

Question

背景故事

我是 React（和 Redux）新手，想要编写一个 Web 应用程序，其中交互仅通过键盘/远程事件（箭头键而不是鼠标或触摸）进行，类似于 netflix 在其嵌入式电视应用程序中所做的事情。

我对如何构建这样一个应用程序有一个粗略的想法，但不确定在 ReactJS 中是否有更优雅的方法来做到这一点。

处理组件矩阵内的箭头键交互的想法

我的想法是为容器内的组件提供某种集中状态：

• 只有一个重点组件
• 聚焦组件获取其容器传递给它的所有键盘事件
• 容器可以在键盘事件到达焦点组件之前使用它
• 容器本身是通过路由激活的
• 容器处理其子组件的焦点状态
• 如果聚焦组件到达边缘（例如，在 x 轴列表中按向下键），则通知其父容器，容器可以决定接下来应该发生什么（例如，其他组件获得聚焦）

例子

让有一个名为 MyLibrary 的全屏容器组件。它包括 2 个组件：

1. 左侧导航

2. 右侧活动导航的数据列表视图

       |-----------------------|
       |  Nav  |   List        |
       |  -n1  |   1. Miles    |
       |  -n2  |   2. Bill     |
       |  -n3  |   3. Lester   |
       |       |   4. Herbie   |
       |       |   5. McCoy    |
       |_______________________|
   

MyLibrary 将导航组件集中在安装上，因此上/下/左/右通过 MyLibrary 传递到导航中。

按下了向下键，因此导航更新了它自己选择的条目状态。

按下了“RIGHT”，但“导航”不处理该键，因此它通知 MyLibrary 由于“RIGHT”而想要取消焦点。

MyLibrary 现在通过其配置的组件矩阵知道，导航组件的右侧不聚焦意味着聚焦 ListView。

导航失去焦点，ListView 获得焦点。现在所有键都传递给 ListView。

问题

• 这样的接口应该如何实现到react系统中呢？混合？redux 中的某种 UI 存储？全局单例模块？这里的最佳实践是什么？
• 有没有更标准的方法来解决这个用例？

Answer 1

对于 UI 视图和状态表示

您可以使用建立路由解决方案，例如： https: //github.com/reactjs/react-router

它使您的 UI 与状态（URL、HashLocation 或内存状态）保持同步

用于热键管理

我还会选择一个精心设计的解决方案，例如： https: //github.com/Chrisui/react-hotkeys 它为您提供了一种很好的声明性方式来处理热键并专注于布局级别。

最后的话

毕竟它只是 javascript。如果您觉得任何现有的解决方案都太过分了，请随意从这些现有的想法中学习最好的概念，并编写您自己的 ghetto JS 胶水来制作您自己的神奇药水。