[解決済み] componentDidUpdate()の内部で setState()する。

質問

ドロップダウンの高さと画面上の入力の位置に応じて、ドロップダウンを入力の下または上に移動させるスクリプトを書いています。また、その方向に応じてドロップダウンにモディファイアを設定したいです。 しかし setState の内部で componentDidUpdate 無限ループになります（当たり前ですが）

を使用することで解決しました。 getDOMNode とクラス名を直接ドロップダウンに設定しますが、私はReactツールを使用してより良いソリューションがあるはずだと感じています。どなたか助けていただけませんか？

以下は、動作中のコードの一部です。 getDOMNode (i コードを簡単にするために、位置決めロジックを少し無視しました)

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 (
            <DropDown >
                {dataFeed.map((data, i) => {
                    return (<DropDownRow key={response.symbol} data={data}/>);
                })}
            </DropDown>
        );
    }
});

そして、以下は 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 (
            <DropDown className={class} >
                {dataFeed.map((data, i) => {
                    return (<DropDownRow key={response.symbol} data={data}/>);
                })}
            </DropDown>
        );
    }
});

解決方法は？

を使用することができます。 setState 内部 componentDidUpdate . 問題は、ブレーク条件がないため、なぜか無限ループを作っていることです。

コンポーネントがレンダリングされると、ブラウザから提供される値が必要になるという事実に基づけば、あなたのアプローチでは componentDidUpdate のトリガーとなる条件をうまく処理する必要があるだけです。 setState .