Использование ResizeObserver с React - PullRequest
Новая
       25

Использование ResizeObserver с React

0 голосов
/ 08 июля 2019

Я использую React 15 в Chrome и хочу подключить прослушиватель событий для обнаружения изменений в родительском контейнере.Осмотрев варианты, я наткнулся на ResizeObserver и не уверен, как заставить его работать в моем проекте.

В настоящее время я помещаю его в свой конструктор, но он, похоже, не печатает никакого текста, и яя не уверен, что положить в observe вызов. 

class MyComponent extends React.Component {
    constructor(props) {
        super(props);

        const resizeObserver = new ResizeObserver((entries) => {
            console.log("Hello World");
        });

        resizeObserver.observe(somethingGoesHere);
    }

    render() {
        return (
            <AnotherComponent>
                <YetAnotherComponent>
                </YetAnotherComponent>

                <CanYouBelieveIt>
                </CanYouBelieveIt>

                <RealComponent />
            </AnotherComponent>
        );
    }
}

В идеале, я также не хочу обернуть RealComponent в div и присвоить этому div идентификатор.Есть ли способ прямого доступа к RealComponent?

Моя цель - наблюдать за любыми изменениями размера RealComponent, но MyComponent тоже подойдет.Что я должен положить в слот somethingGoesHere?

РЕДАКТИРОВАТЬ:

Ради того, чтобы что-то заработало, я укусил пулю и обернул тег div вокруг RealComponent.Затем я дал ему идентификатор <div id="myDivTag"> и изменил вызов observe: 

resizeObserver.observe(document.getElementById("myDivTag"));

Однако при запуске этого я получаю:

Uncaught TypeError: resizeObserver.observeне является функцией

Любая помощь будет принята с благодарностью.

1 Ответ

2 голосов
/ 08 июля 2019

ResizeObserver не может войти в конструктор, потому что div не существует в этой точке в жизненном цикле компонента.

Я не думаю, что вы можете обойти дополнительный div, потому что реагирующие компоненты уменьшаются до htmlэлементы в любом случае.

Поместите это в componentDidMount, и оно должно работать: 

componentDidMount() {
   const resizeObserver = new ResizeObserver((entries) => {
        console.log("Hello World");
   });

   resizeObserver.observe(document.getElementById("myDivTag"));
}
...