@ceeed

Как мне получить доступ до дом элемента в классовом компоненте?

У меня есть классовый компонент, в нем мне нужно получить дом элемент, но всегда когда я это делаю через ref, то получаю null. В чем моя ошибка?

Для начала я в конструкторе объявляю ref:
constructor(props) {
this.place = React.createRef();
}


Далее то место, где мне нужно получить доступ до элемента.

componentDidMount = (): void => {
    const scrPlace = this.place.current
    console.log('scrPlace',scrPlace);
    if (scrPlace && this.prevScrollpos) {
      scrPlace.addEventListener("scroll",() => {
        const currentScrollPos = window.pageYOffset;
        console.log("currentScrollPos",currentScrollPos);
        if (this.prevScrollpos > currentScrollPos) {
          document.getElementById("t_rates")!.style.top = "0";
        } else {
          document.getElementById("t_rates")!.style.top = "-50px";
        }
        this.prevScrollpos = currentScrollPos;
      }) 
    }
}


И дальше сам ref на дом элемент:

<div className="scrolling_place" ref={this.place}>
                      <Content
                        makeScreenshot={this.makeScreenshot}
                        toggleSelectedAccount={this.toggleSelectedAccount}
                        getAccounts={this.getAccounts}
                        setError={this.setError}
                        forexRates={forexRates}
                        accounts={accounts}
                        currentAccount={accounts[selectedAccountNum]}
                        userData={userData}
                        comissions={comissions}
                        offers={offers}
                        adDepth={adDepth}
                        offerChangeInBotActive={this.offerChangeInBotActive}
                        offerChangeOnP2PActive={this.offerChangeOnP2PActive}
                        updateOfferSetting={this.updateOfferSetting}
                        updateOfferSettings={this.updateOfferSettings}
                        updateOfferExchangeData={this.updateOfferExchangeData}
                        setDepthGetted={(id: string, exchange: string) =>
                          this.setDepthGetted(id, exchange)
                        }
                        needToGetDepth={needToGetDepth}
                        hasCompetitorSettingsAccess={
                          hasCompetitorSettingsAccess
                        }
                      />
                      <Footer />
                    </div>
  • Вопрос задан
  • 30 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы