Я пытаюсь реализовать вспомогательные компоненты для CSS Grids. У меня есть что-то вроде (подготовьтесь):
<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.Row
повторно отображаются, но не обязательно в "естественном" порядке, в котором они находятся, т.е. В DOM.
Моя догадка заключается в том, что в зависимости от компонентов, вызываемых в определенном порядке render()
это плохая идея, а также изменение содержимого свойств контекста в render()
.
Каковы мои другие варианты - я действительно хочу знать "естественный" порядок узлов-потомков в дереве компонентов. Если бы они были прямыми дочерними элементами, я бы предположил, что это будет легко - в моем случае, хотя у меня есть вложенные компоненты, которые могут выводить строки.