javascript 反应中的反应

Posted 2021-05-03

For showing/hiding ala media queries..
https://stackoverflow.com/questions/40873958/how-to-make-react-responsive-struggling-to-think-in-the-react-way

or just use react-responsive!
https://medium.com/@mustwin/responsive-react-9b56d63c4edc

-----------------------------------------------------------------

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>
        )
    }
}