Question

我希望在屏幕尺寸发生变化时自动添加或删除className。

我尝试使用媒体查询，但这对我来说并不适用。在我的样式表中，我有预定义的类，例如：

.bold { font-weight: bold;}

并且无法使用媒体查询添加或删除此类。

Answer 1

将resize事件处理程序附加到窗口，然后您可以检查屏幕大小并使用它来更新状态。然后在render中，您应该检查状态以告知是否应该添加或删除新类：

componentDidMount() {
    window.addEventListener('resize', () => {
        this.setState({
            isMobile: window.innerWidth < 1200
        });
    }, false);
}

render() {
    const className = this.state.isMobile ? 'mobile' : '';
    return (
        <Component className={className} />
    )
}

Answer 2

如果您希望使用钩子而不是类来完成此操作，下面是这种情况的简单示例：

BsonTimestamp(0)

有关useEffect钩子的更深入说明，请查看官方的React文档here。请注意，您必须使用React 16.8或更高版本才能利用钩子。

如何在屏幕大小更改时添加或删除className

2 个答案: