Реагировать на компонент ссылки на собственный DOM-элемент в машинописи

Question

Все еще будучи новичком в React, я столкнулся со следующей проблемой: я создаю компонент следующим образом:

export const CSpiderWeb = (props: iSpiderWebProps) => {
    const classes = useStyles();
    const [drawingObject, setDrawingObject] = useState({} as iDrawingObject);

    const _InitRaphael = (target : HTMLDivElement) => {
        while (target.firstChild) {
            target.removeChild(target.firstChild);
        }

        const workDrawingObject : iDrawingObject = {
            width : target.offsetWidth,
            height : target.offsetHeight,
            centerX : target.offsetWidth / 2,
            centerY : target.offsetHeight /2
        }

        workDrawingObject.paper = Raphael(target, workDrawingObject.width, workDrawingObject.height);

        setDrawingObject(workDrawingObject);
    }


    var workRef = createRef<HTMLDivElement>();
    _InitRaphael(workRef.current as HTMLDivElement);

    return <div ref={workRef} className={classes.paperContainer}>{drawingObject.centerX}x{drawingObject.centerY}</div>
}

Что я пытаюсь сделать, это получить обработанный элемент DIVи передайте его методу _InitRaphael, но похоже, что он вызывается до визуализации элемента. Имеет смысл, но КАК это можно сделать. Я гуглил и гуглял, и иногда я пересекаю хук componentDidMount, но можно ли это использовать здесь, и если это так, то как?

Answer 1

Вы должны рассмотреть возможность использования хука useEffect. Он вызывается после рендеринга, поэтому ссылка должна иметь значение.

useEffect(() => {
  _InitRaphael(workRef.current as HTMLDivElement);
}, [])

Но если вы не используете внешнюю не React-библиотеку, вы не должны использовать этот шаблон. В приложении React использование ссылок является исключением, а не обычным способом заморозить вещи.

Answer 2

Вы не можете использовать componentDidMount, потому что он может использоваться только в class components, когда вы используете function component, как в вашем примере используйте hooks https://reactjs.org/docs/hooks-effect.html

Я бы порекомендовал вамиспользуйте useEffect крючок, который имитирует componentDidMount.