Question

我是react.js的新手，我尝试使用https://github.com/contra/react-responsive

为我的第一个应用添加一些自适应功能

所以，很酷，我可以将它用作我的内容的包装，如

widget-gallery-posts-widget-__i__-image

但是我可以做一些魔法来使用这个功能，就像一些常量吗？

image

感谢您的帮助！

Answer 1

不，但我想你可以改用窗口宽度：

const isMobile = window.innerWidth < 768;
return <div className={ isMobile ? "mobile" : "desktop" }></div>;

如果你想在窗口调整大小上更新它，那么还有更多内容。

您需要将 isMobile 值保留在组件状态中，然后在窗口调整大小时更新状态，这将导致组件重新呈现。

你需要这样的东西：

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isMobile: window.innerWidth < 768
        };
    }

    updateIsMobile() {
        this.setState({
            isMobile: window.innerWidth < 768
        });
    }

    componentDidMount() {
        window.addEventListener('resize', this.updateIsMobile);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.updateIsMobile);
    }

    render() {
        return <div className={ this.state.isMobile ? "mobile" : "desktop" }></div>
    }

}

但是，如果它只是设置一个CSS类，那么你可能最好只使用CSS媒体查询。

Answer 2

查看文档，您可以这样做：

return (
    <MediaQuery maxDeviceWidth={767}>
        {isMobile => (
            <div className={isMobile ? 'mobile' : 'desktop'>
            </div>
        )}
    </MediaQuery>
);

如果孩子是一个功能，该功能用于生成真正的孩子。

如何使用反应响应作为const

2 个答案: