使用React寻找更好的解决方案来根据窗口大小移动按钮

Question

我有一个小按钮，其位置我想根据窗口宽度移动。该按钮可以移动一个上限（向右多远）和一个下限（左侧）。我目前有一个解决方案，但是网页上的性能不是最佳的。按钮移动有一个小滞后。我当前的解决方案设置了按钮位置的初始状态。我在componentDidmount方法中添加了一个EventListener，以检测窗口大小的更改。当大小变化时，它调用以下方法：

updateButtonLocation() {
        if(window.innerWidth>=1260) {
            this.setState({editButtonLocation:1218});
        }
        else if(window.innerWidth<1260 && window.innerWidth>762){
            this.setState({editButtonLocation:window.innerWidth-42});
        }
        else {
            this.setState({editButtonLocation: 720});
        }
    }

以下CSS代码将按钮定位在我需要的位置：

style={props.isShowBtn?{display:"inline", left: props.editButtonLocation}:{display:'none'}}

还有另外两种可能更好的解决方案。而不是使用状态，我可以为样式做以下操作：

style={props.isShowBtn?{display:"inline", left: 90vw}:{display:'none'}}

这将窗口大小移动按钮，但是我认为我可以设置上限和下限。如果可能的话，我该怎么办？

我正在研究的另一个选项是使用媒体查询。但是，我没有这项技术的经验。是否可以使用此工具来完成我的上述代码？

Answer 1

button {
    position: relative;
    left: 720px;
}
@media (min-width: 1260px) {
    button {
       left: 1218px;
    }
}
@media (max-width: 1260px) and (min-width: 762px) {
    button {
        left: calc(100vw - 42px);
    }
}

是的，可以使用媒体查询。您不能在不设置元素的位置的情况下使用诸如顶部和左的属性。在这种情况下，您可能想使用保证金。