setState() 位于 componentDidUpdate() 内部

我正在编写一个脚本，该脚本根据下拉菜单的高度和屏幕上输入的位置将下拉菜单移动到输入下方或上方。我还想根据其方向将修饰符设置为下拉菜单。 但使用setState里面的componentDidUpdate创建无限循环（这是显而易见的）

我找到了使用的解决方案getDOMNode并直接将 classname 设置为 dropdown，但我觉得使用 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 (
            <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>
        );
    }
});

您可以使用setStateinside componentDidUpdate。问题在于，由于没有中断条件，您正在以某种方式创建无限循环。

基于您需要浏览器在渲染组件后提供的值这一事实，我认为您使用的方法componentDidUpdate是正确的，只是需要更好地处理触发条件setState.