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