React:在层次结构中获取组件顺序

Question

我正在尝试为CSS网格实现辅助组件.我喜欢(准备自己):

<ColumnContainer columns={[ "1em", "1fr", "auto", "auto", "1em", "auto"]}>
  <ColumnContainer.Row>
    { rowIdx => (
      <div style={{ gridRow: rowIdx, gridColumn: "1 / 3" }}>
      </div>
    )}
  </ColumnContainer.Row>
</ColumnContainer>

ColumnContainer:

• 是否设置了div具有display: grid各种网格属性的容器
• 也是一个上下文提供者

然后,ColumnContainer.Row:

• 基本上是上下文消费者
• 作为一个孩子的功能
• 不需要是直接的孩子ColumnContainer- 因此使用上下文

提供的上下文是一个整数,layoutVersion只要该行要更改(以触发重新呈现),并且 - 黑客攻击 - 一个空数组,它就会递增.

这个想法是,在每次ColumnContainer.Row渲染时,它将自身(可以是任何对象)添加到其上下文中传递引用的数组,并将子函数与数组的大小一起呈现为参数(行索引).

信不信由你,这适用于第一次渲染,如果行只是添加到最后.

但是,当组件添加到组件DOM的"中间"时,生成的渲染行是无序的(但不重叠).我认为,在新布局版本(重新渲染)的情况下,所有ColumnContainer.Rows都被重新渲染,但不一定是它们所处的"自然"顺序,即在DOM中.

我的猜测是,根据render()以某种顺序调用的组件是一个坏主意,以及修改上下文属性的内容render().

我还有什么选择 - 我真正想要的是了解组件树中后代节点的"自然"顺序.如果它们是直接子元素,我猜它会很容易 - 在我的情况下虽然我有嵌套的组件可以输出行.

Answer 1

我找到了一个狡猾/黑客的解决方案，通过在上下文中注入的回调让子组件“注册”自己（唯一的 ID 和引用）到容器组件。

容器组件使用功能状态更新来累积这些回调，并在需要重新计算的状态中设置标志。

容器componentDidUpdate检查重新计算标志并使用浏览器 DOM 函数比较所有 DOM 注释（通过 refs）compareDocumentPosition。下一个状态更新将清除重新计算标志并包括每个子 ID 的顺序。

然后，此状态通过上下文传递给所有子级，他们可以在其中通过 ID 查找索引。

显然这很糟糕，但这是我现在所拥有的一切。仍然想奖励更好的解决方案。