javascript — setState () внутри componentDidUpdate ()

setState () внутри componentDidUpdate ()

Я пишу скрипт, который перемещает раскрывающийся список ниже или выше ввода в зависимости от высоты раскрытия и положения ввода на экране. Также я хочу установить модификатор в раскрывающемся списке в соответствии с его направлением. Но использование setState внутри componentDidUpdate создает бесконечный цикл (что очевидно)

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

Вот часть рабочего кода с getDOMNode (немного пренебрегаемая логика позиционирования для упрощения кода)

 let SearchDropdown = React.createClass({ componentDidUpdate(params) { let el = this.getDOMNode(); el.classList.remove('dropDown-top'); if(needToMoveOnTop(el)) { el.top = newTopValue; el.right = newRightValue; el.classList.add('dropDown-top'); } }, render() { let dataFeed = this.props.dataFeed; return ( {amp}lt;DropDown {amp}gt; {dataFeed.map((data, i) ={amp}gt; { return ({amp}lt;DropDownRow key={response.symbol} data={data}/{amp}gt;); })} {amp}lt;/DropDown{amp}gt; ); } }); 

а вот код с setstate (который создает бесконечный цикл)

 let SearchDropdown = React.createClass({ getInitialState() { return { top: false }; }, componentDidUpdate(params) { let el = this.getDOMNode(); if (this.state.top) { this.setState({top: false}); } if(needToMoveOnTop(el)) { el.top = newTopValue; el.right = newRightValue; if (!this.state.top) { this.setState({top: true}); } } }, render() { let dataFeed = this.props.dataFeed; let class = cx({'dropDown-top' : this.state.top}); return ( {amp}lt;DropDown className={class} {amp}gt; {dataFeed.map((data, i) ={amp}gt; { return ({amp}lt;DropDownRow key={response.symbol} data={data}/{amp}gt;); })} {amp}lt;/DropDown{amp}gt; ); } }); 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector