Реагировать - как получить размер дочерних элементов компонента и переместить их

Question

У меня есть компонент, который упорядочивает элементы в динамической сетке, что-то вроде этого:

class GridComponent extends React.Component {
  render() {
    return <div>
      {items.map(function(item){
          return <ItemComponent someData={item}/>;
      })}
    </div>
  }
}

Теперь я хочу расположить ItemComponents основанный на некотором алгоритме, который нуждается в человеке ItemComponentsразмеры.

Итак, я думаю, мне нужно:

1. Сделать все ItemComponents
2. Получить размеры всех ItemComponents (которые исправляются только после того, как они были обработаны)
3. Переместите ItemComponents на основе моего алгоритма

Итак, мой вопрос, как это, или более конкретно:

• Как мне выполнить код, когда все ItemComponents были оказаны?
• Как я могу получить размеры ItemComponents изнутри GridComponent?
• Должен ли я затем повторить GridComponent с рассчитанным ItemComponents положение или я должен установить позиции ItemComponents как-то напрямую?

Answer 1

Это довольно крутая идея, и вы можете полностью сделать это, используя внутреннее состояние и несколько методов жизненного цикла React. Чтобы ответить на каждый из ваших вопросов:

• функция componentDidMount будет вызван на родителя после всех конструкторов и componentDidMount Таким образом, это хорошее место для вызова некоторой функции, которая может зависеть от вашего состояния.
• по размерам я предполагаю, что вы имеете в виду ширину экрана и высоту корневого компонента ItemComponentПоэтому на componentDidMount в ItemComponentВы можете установить ref и найти ширину и высоту элемента DOM
• Лучшее решение - монтировать, но не отображать дочерние элементы (это можно сделать с помощью некоторой переменной состояния инициализации или реквизита), и отображать их только после того, как вы вычислили их истинные конечные позиции. Например, каждый ItemComponent может иметь опору под названием initialized что ложно, пока родитель не найдет, где его разместить.

Собрав все это вместе, поскольку вашему алгоритму, вероятно, потребуются все измерения, вы, вероятно, захотите создать обратный вызов в родительском элементе, давайте назовем его setItemDimensions(id, width, height)который вызывается на componentDidMount каждого ItemComponent, Вы должны держать карту всех ваших инициализированных ItemComponentи каждый раз, когда setItemDimensions вызывается, проверьте, есть ли еще какие-либо (возможно, инициализируйте карту со всеми нулями и предположите, что она "готова", когда не осталось никаких нулей).

Когда последний null нет, вы можете запустить алгоритм, выяснить позиции и визуализировать ItemComponentс в нужном месте и с initialized={true} (или просто initialized).

Посмотрим, сработает ли это!