Question

我对ReactJS还有点新意，所以我一直在努力以响应的方式实现React组件。

我在我的应用中使用react-tabs。当宽度足够宽时这很好，但是一旦我将它缩小到手机大小，我想制作一个汉堡包面板。

那么，我该怎么做呢？我是否在组件中不断检查宽度，在那里我创建一个条件if-else块渲染Tabs组件或Hamburger面板组件？

必须有一个简单的方法来解决这个问题。但是我对如何去做有点迷茫。

Answer 1

这是我过去如何处理这个问题的一个例子。

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            screenIsbig: true
        };
    }

    handleResize() {
        if(window.innerWidth < 1200) {
            this.setState({screenIsbig: false})
        } else {
            this.setState({screenIsbig: true});
        }
    }

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

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

    render() {
        let renderThis;
        if(this.state.screenIsbig) {
            renderThis = <h1>This is for big screens</h1>
        } else {
            renderThis = <h3>This is for small screens</h3>
        }
        return (
            <div>
                {renderThis}
            </div>
        )
    }
}

如何使React响应？挣扎着以React的方式思考

1 个答案: