我正在开发一个 TreeView 组件,我发现自己编写了大量代码来规避一个由使用 React-DnD 引起的相当简单的问题。
恰当的例子:当使用向上和向下箭头键导航树视图时,应该选择的节点并不总是同一级别的后继或前驱。例如,当向上移动并且同级别的前任是打开的并且有孩子时,可用性决定(至少对我而言)应该选择前任的最后一个孩子(或者实际上是最后一个可见的后代),因为这在视觉上是直接的先前选择的节点的前任。
当试图确定前任的后代(我们称之为“目标”节点)是打开还是关闭时,就会出现问题。该信息被维护在目标节点的状态中。
这就是问题所在:我为表示节点而创建的组件由 React-DnD 包装DragSource
。但是,虽然 React-DnD 的包装机制提供了对包装组件属性的透明访问,但它的状态并非如此:DragSource 公开它自己的状态,但不提供对其包装组件的状态的访问。
结合包装器拦截ref
包装组件的回调以传递其自己的实例而不是包装的事实,这意味着我根本无法访问节点的打开/关闭状态,即使我确切知道它们在哪里位置上。(实际上,在我开始使用 React-DnD 之前,我确实做到了这一点。)
我该如何处理这种情况?这可能是 React-DnD 的错误或疏忽,还是有办法访问我不知道的包装组件?
注意:似乎有一种方法可以访问包装的组件,但文档指出这是用于测试的。