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

Question

背景故事

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

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

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

我的想法是在容器中为某个组件提供某种聚焦状态：

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

示例

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

1. 左侧导航

2. 右侧有效导航数据的ListView

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

MyLibrary将导航组件聚焦在mount上，因此UP / DOWN / LEFT / RIGHT通过MyLibrary传递到Navigation。

按下了DOWN，因此导航会更新它自己选择的输入状态。

RIGHT被按下，但导航无法处理此键，因此它会通知MyLibrary它因为RIGHT而无法聚焦。

MyLibrary现在知道它配置的组件矩阵，RIGHT的导航组件不聚焦意味着聚焦ListView。

导航变得没有重点，ListView变得专注。现在所有键都传递给ListView。

问题

• 如何在反应系统中实现这样的界面？混入？ redux中的某种UI存储？全球单身人士模块？这里的最佳做法是什么？
• 有没有更标准的方法来解决这个用例？

Answer 1

用于UI视图和状态表示

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

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

用于热键管理

我还会选择一个很好的解决方案，例如： https://github.com/Chrisui/react-hotkeys 它为您提供了一种很好的声明方式来处理热键并在布局级别进行聚焦。

最后的话

毕竟它只是javascript。如果您觉得任何现有的解决方案都是矫枉过正，请随时从这些现有想法中学习最好的概念，并编写自己的犹太人JS胶水来制作自己的魔法药水。