Minha resposta de 2020 (ou 2019)
import React, {Component, useRef, useLayoutEffect} from 'react';
import { useDispatch } from 'react-redux';
import { Toast, ToastBody, ToastHeader } from 'reactstrap';
import {WidgetHead} from './WidgetHead';
export const Widget = ({title, toggle, reload, children, width, name}) => {
let myself = useRef(null);
const dispatch = useDispatch();
useLayoutEffect(()=>{
if (myself.current) {
const height = myself.current.clientHeight
dispatch({type:'GRID_WIDGET_HEIGHT', widget:name, height})
}
}, [myself.current, myself.current?myself.current.clientHeight:0])
return (
<Toast innerRef={myself}>
<WidgetHead title={title}
toggle={toggle}
reload={reload} />
<ToastBody>
{children}
</ToastBody>
</Toast>
)
}
deixe usar sua imaginação para ver o que está faltando aqui (WidgetHead), reactstrap
é algo que você pode encontrar no npm: substitua innerRef
por ref
por um elemento dom legado (digamos a <div>
).
useEffect ou useLayoutEffect
O último é considerado síncrono para mudanças
useLayoutEffect
(ou useEffect
) segundo argumento
O segundo argumento é uma matriz e é verificado antes de executar a função no primeiro argumento.
eu usei
[eu.corrente, eu.corrente? eu.corrente.clientHeight: 0]
porque eu.atual é nulo antes da renderização, e isso é uma boa coisa para não verificar, o segundo parâmetro no final myself.current.clientHeight
é o que eu quero verificar se há alterações.
o que estou resolvendo aqui (ou tentando resolver)
Estou resolvendo aqui o problema do widget em uma grade que muda sua altura por vontade própria, e o sistema de grade deve ser elástico o suficiente para reagir ( https://github.com/STRML/react-grid-layout ).
setState
para atribuir o valor da altura a uma variável de estado.