反应:获取层次结构中的组件顺序

我正在尝试为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 :

• 基本上是上下文使用者
• 将函数作为子函数
• 不需要成为 柱状容器 -因此使用上下文

提供的上下文是整数, layoutVersion 当一组行要更改(以触发重新渲染)时,该值将递增,而-hack of hack-一个空数组。

每个人的想法都是 列容器.row 呈现时,它将自身(可以是任何对象)添加到数组中,该数组的引用将在上下文中传递,并以数组的大小作为参数(行索引)呈现子函数。

不管你信不信由你,这对第一次渲染有效,如果行只是添加到末尾。

但是,当组件添加到组件dom的“中间”位置时,生成的渲染行顺序不对(但不重叠)。我认为,这意味着,在新的布局版本(重新渲染)的情况下,所有 列容器.row s被重新渲染,但不一定按照它们所处的“自然”顺序,即在dom中。

我猜这取决于 render() 按一定的顺序调用是一个坏主意,并且在 呈现() .

我的其他选择是什么?我真正想知道的是组件树中子节点的“自然”顺序。如果它们是直接子元素,我想这很容易——在我的例子中,尽管我有可以输出行的嵌套组件。