Eu tenho uma página da web complexa usando os componentes React e estou tentando converter a página de um layout estático para um layout mais responsivo e redimensionável. No entanto, continuo tendo limitações com o React e estou me perguntando se existe um padrão padrão para lidar com esses problemas. No meu caso específico, eu tenho um componente que é renderizado como uma div com display: table-cell e width: auto.

Infelizmente, não posso consultar a largura do meu componente, porque você não pode calcular o tamanho de um elemento, a menos que ele seja realmente colocado no DOM (que possui o contexto completo para deduzir a largura renderizada real). Além de usar isso para coisas como posicionamento relativo do mouse, também preciso disso para definir corretamente os atributos de largura nos elementos SVG dentro do componente.

Além disso, quando a janela é redimensionada, como comunico alterações de tamanho de um componente para outro durante a instalação? Estamos fazendo toda a nossa renderização SVG de terceiros em shouldComponentUpdate, mas você não pode definir estado ou propriedades em si mesmo ou em outros componentes filhos nesse método.

Existe uma maneira padrão de lidar com esse problema usando o React?