reactjs – React.js：键盘导航

我想要在React中重写当前基于Backbone的应用程序.让我头疼的一项功能是键盘导航.该应用必须可以使用键盘导航.这大致是这样的：

有一个带有几个按钮的标题元素.根据网络请求的结果,还有一个具有可导航元素的主区域,这些元素是动态构建的.主区域中的元素以一种网格排列在屏幕上(通常,每行2行3个元素,但在模型上我显示了2行元素的行).

焦点最初是在元素1上(虽然如果没有提取任何元素,那么我猜一个标题按钮应该被聚焦).使用箭头键,应该能够在组件内导航(使用右箭头键从元素1到元素2;使用左箭头键从元素2到元素1;使用向下箭头键从元素1到元素3,等等,以及组件之间(从元素1到标题的按钮1与向上箭头键;从标题的按钮1到元素1与向下键等).当聚焦在适当的元素上时,按下箭头按钮可以将不适合屏幕的元素带入视野中(例如,当聚焦在元素2上时按向右箭头应该向右“滚动”主区域,将元素5带入视口).

目前,在最初的基于Backbone的应用程序中,此功能是通过向所有可导航元素添加自定义属性,然后使用第三方基于jQuery的库来计算屏幕上元素的绝对位置并移动焦点来实现的.一个元素到下一个元素取决于它们相对于彼此的定位方式.什么是惯用的React(Redux,如果可能的话)重现这种行为的方法？

我的建议：

为元素的容器组件添加和事件侦听器.在componentDidMount中设置一个事件监听器,带有一个回调,它以某种方式计算下一个元素基于什么按钮的内容(我很难就此提出建议 – 如果你严格要求每页最多只有4行,那么你可以做类似的事情(左)=>当前-1,右(右)=>当前1,(下)=>当前(计数/ 2)等).这将触发像这样的动作

{ type: ELEMENT_SELECTED, payload: { selectedElID } }

或者如果你只是将它保持在本地状态,this.setState({selectedEl})

然后在渲染函数中,始终确保在视图中使用所选元素进行渲染.

那有意义吗？