У меня сложная веб-страница с использованием компонентов React, и я пытаюсь преобразовать страницу из статического макета в более адаптивный макет с изменяемым размером. Тем не менее, я продолжаю сталкиваться с ограничениями с React, и мне интересно, есть ли стандартный шаблон для решения этих проблем. В моем конкретном случае у меня есть компонент, который визуализируется как div с display: table-cell и width: auto.

К сожалению, я не могу запросить ширину моего компонента, потому что вы не можете вычислить размер элемента, если он фактически не помещен в DOM (который имеет полный контекст, с помощью которого можно вывести фактическую визуализированную ширину). Помимо использования этого для таких вещей, как относительное позиционирование мыши, мне также нужно это для правильной установки атрибутов ширины SVG-элементов в компоненте.

Кроме того, когда размер окна изменяется, как я могу сообщить об изменении размера от одного компонента к другому во время установки? Мы выполняем весь наш сторонний рендеринг SVG в shouldComponentUpdate, но вы не можете установить состояние или свойства для себя или других дочерних компонентов в этом методе.

Существует ли стандартный способ решения этой проблемы с помощью React?