React - 如何编写像 netflix 这样的纯键盘应用程序？
React - How to write keyboard only apps like netflix?
背景故事
我是 React（和 redux）的新手，想编写一个 webapp，其中交互仅通过 keyboard/remote 事件发生（箭头键而不是鼠标或触摸），类似于 netflix 在他们的网站上所做的嵌入式电视应用程序。
我对如何构造这样一个应用程序有一个粗略的想法，但我不确定在 ReactJS 中是否有更优雅的方法来做到这一点。
在组件矩阵中处理箭头键交互的想法
我的想法是在容器内为组件提供某种 focused 状态：
- 只有一个重点组件
- focused 组件获取其容器传递给它的所有键盘事件
- 容器可以在到达 focused 组件之前消耗键盘事件
- 容器本身由路由激活
- 容器处理其子组件的 focused 状态
- focused 组件在到达边缘时通知它的父容器（例如，在 x 轴列表中时按下 DOWN）容器可以决定接下来应该发生什么（例如其他组件得到 重点)
例子
假设有一个名为 MyLibrary 的全屏容器组件。
它包括 2 个组件：
- 左侧导航
右侧活动导航的数据列表视图
|-----------------------|
| Nav | List |
| -n1 | 1. Miles |
| -n2 | 2. Bill |
| -n3 | 3. Lester |
| | 4. Herbie |
| | 5. McCoy |
|_______________________|
MyLibrary 将导航组件集中在装载上，因此 UP/DOWN/LEFT/RIGHT 通过 MyLibrary 传递到 Navigation。
向下键被按下，所以 Navigation 更新了它自己的选定条目状态。
RIGHT 被按下，但是 Navigation 不处理这个键，所以它通知 MyLibrary 它想要因为 RIGHT 而失去焦点。
MyLibrary 现在通过其配置的组件矩阵知道，通过 RIGHT 取消导航组件的焦点意味着聚焦 ListView。
导航失去焦点，ListView 获得焦点。现在所有键都传递给 ListView。
问题
- 这样的接口应该如何实现到react系统中？混合？某种 UI 存储在 redux 中？全局单例模块？这里的最佳做法是什么？
- 是否有更标准的方法来解决这个用例？
对于 UI 视图和状态表示
您可以使用建立路由解决方案，例如：
https://github.com/reactjs/react-router
它使您的 UI 与状态（URL、HashLocation 或内存状态）保持同步
用于热键管理
我也会选择精心设计的解决方案，例如：
https://github.com/Chrisui/react-hotkeys
它为您提供了一种很好的声明式方式来处理热键并在布局级别进行聚焦。
最后的话
毕竟只是javascript。如果您觉得现有的任何解决方案都有些矫枉过正，请随时从这些现有的想法中学习最好的概念，并编写您自己的 ghetto JS 胶水来制作您自己的魔法药水。
背景故事
我是 React（和 redux）的新手，想编写一个 webapp，其中交互仅通过 keyboard/remote 事件发生（箭头键而不是鼠标或触摸），类似于 netflix 在他们的网站上所做的嵌入式电视应用程序。
我对如何构造这样一个应用程序有一个粗略的想法，但我不确定在 ReactJS 中是否有更优雅的方法来做到这一点。
在组件矩阵中处理箭头键交互的想法
我的想法是在容器内为组件提供某种 focused 状态：
- 只有一个重点组件
- focused 组件获取其容器传递给它的所有键盘事件
- 容器可以在到达 focused 组件之前消耗键盘事件
- 容器本身由路由激活
- 容器处理其子组件的 focused 状态
- focused 组件在到达边缘时通知它的父容器（例如，在 x 轴列表中时按下 DOWN）容器可以决定接下来应该发生什么（例如其他组件得到 重点)
例子
假设有一个名为 MyLibrary 的全屏容器组件。 它包括 2 个组件：
- 左侧导航
右侧活动导航的数据列表视图
|-----------------------| | Nav | List | | -n1 | 1. Miles | | -n2 | 2. Bill | | -n3 | 3. Lester | | | 4. Herbie | | | 5. McCoy | |_______________________|
MyLibrary 将导航组件集中在装载上，因此 UP/DOWN/LEFT/RIGHT 通过 MyLibrary 传递到 Navigation。
向下键被按下，所以 Navigation 更新了它自己的选定条目状态。
RIGHT 被按下，但是 Navigation 不处理这个键，所以它通知 MyLibrary 它想要因为 RIGHT 而失去焦点。
MyLibrary 现在通过其配置的组件矩阵知道，通过 RIGHT 取消导航组件的焦点意味着聚焦 ListView。
导航失去焦点，ListView 获得焦点。现在所有键都传递给 ListView。
问题
- 这样的接口应该如何实现到react系统中？混合？某种 UI 存储在 redux 中？全局单例模块？这里的最佳做法是什么？
- 是否有更标准的方法来解决这个用例？
对于 UI 视图和状态表示
您可以使用建立路由解决方案，例如： https://github.com/reactjs/react-router
它使您的 UI 与状态（URL、HashLocation 或内存状态）保持同步
用于热键管理
我也会选择精心设计的解决方案，例如： https://github.com/Chrisui/react-hotkeys 它为您提供了一种很好的声明式方式来处理热键并在布局级别进行聚焦。
最后的话
毕竟只是javascript。如果您觉得现有的任何解决方案都有些矫枉过正，请随时从这些现有的想法中学习最好的概念，并编写您自己的 ghetto JS 胶水来制作您自己的魔法药水。