IT技术 - 如何在屏幕响应时自动更改 contentStyle？ - 吾爱随笔录

我正在使用 Material UI 来制作应用程序布局。为了使我的布局响应，我使用import ResponsiveMixin from 'react-responsive-mixin'; ResponsiveMixin 的文档没有为我提供 React.Component 类作为示例，因此我尝试使用来自“react-mixin”的导入 reactMixin；反而。

这是我的代码：

进口

import React from 'react';
import reactMixin from 'react-mixin';
import ResponsiveMixin from 'react-responsive-mixin';

import Paper from 'material-ui/lib/paper';

内容样式

const contentStyle = {
    small: {
        height: '100%',
        width: '98%',
        paddingTop: 60,
        marginLeft: '1%',
        paddingLeft: 0,
        paddingRight: 0
    },
    medium: {
        height: '100%',
        width: '90%',
        paddingTop: 60,
        marginLeft: '5%',
        paddingLeft: 0,
        paddingRight: 0
    },
    large: {
        height: '100%',
        width: '80%',
        paddingTop: 60,
        marginLeft: 280,
        paddingLeft: 40,
        paddingRight: 40
    }
};

这是我的组件

export class MainLayout extends React.Component {

    constructor(props) {
        super(props);
    }
    componentDidMount() {
        this.media({maxWidth: 600}, function () {
            /*small*/
        }.bind(this));

        this.media({minWidth: 601, maxWidth: 1024}, function () {
            /*medium*/
        }.bind(this));

        this.media({minWidth: 1025}, function () {
            /*large*/
        }.bind(this));
    }

    render() {
        const {header, content, footer} = this.props; // destructure this.props to consts
        return (
            <div>
                <header>
                    {header}
                </header>
                <main>
                    <Paper style={contentStyle} zDepth={1}>
                        {content}
                    </Paper>
                </main>
                <footer>
                    <Paper style={contentStyle}>
                        {footer}
                    </Paper>
                </footer>
            </div>
        )
    }
}
reactMixin(MainLayout.prototype, ResponsiveMixin);

ResponsiveMixin 位于 componentDidMount() 之上{/包含响应混合函数/}

谢谢你的帮助:D