不响应

Question

我是React的初学者。所以我有2个组成部分-登录和横幅

**Login.js**

import React from 'react';
 function login(){
    return(
        <div>
            <b>Welcome back</b>
            <p>Sign in to continue</p>
            <div >
                <input type = "text" placeholder="Email address" />
            </div>

            <div>
                <input type="text" placeholder="Password"/>
            </div>
            <h6>Forgot your password?</h6>
            <div>
                <button>Log In</button>
            </div>

            <p>Don't have an account?<b> Sign Up instead</b></p>


        </div>
    )
}

export default login

**Banner.js**
import React from 'react';
import pic from './Banner.png';

function Banner(){
    return(
        <div >
            <img src = {pic} />
        </div>
    )
}


export default Banner

因此，我试图做的是在台式机尺寸中同时显示两个组件，在移动尺寸时仅显示“登录”组件。我不知道如何去做。当我转到移动尺寸时，“登录”组件将移动到横幅上方，而不是仅显示“登录”。

Answer 1

请检查此示例。希望对您有帮助。

import React from 'react';
import PropTypes from 'prop-types';
import {makeStyles} from '@material-ui/core/styles';
import Hidden from '@material-ui/core/Hidden';
import withWidth from '@material-ui/core/withWidth';

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
    },
    container: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    paper: {
        padding: theme.spacing(2),
        textAlign: 'center',
        color: theme.palette.text.secondary,
        flex: '1 0 auto',
        margin: theme.spacing(1),
    },
}));

function ResponsiveExample(props) {
    const classes = useStyles();
    const {width} = props;

    return (
        <div className={classes.root}>
            <Hidden mdDown>
                <div className={classes.container}
                     style={{backgroundColor: '#499DF5', color: 'white', padding: '20px'}}>
                    <Banner/>
                </div>
                <div style={{backgroundColor: 'whitesmoke', color: 'green', padding: '20px'}}>
                    <Login/>
                </div>
            </Hidden>
            <Hidden smUp>
                <div style={{backgroundColor: 'whitesmoke', color: 'green', padding: '20px'}}>
                    <Login/>
                </div>
            </Hidden>
        </div>
    );
}

ResponsiveExample.propTypes = {
    width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,
};

export default withWidth()(ResponsiveExample);

function Banner() {
    return (
        <div>
            <h1>This is Banner</h1>
        </div>
    )
}
function Login() {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-4'>
                    <form>
                        <div className="form-group">
                            <label htmlFor="username">Username</label>
                            <input type="text" name='username'
                                   className="form-control" id="username"/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="password">Password</label>
                            <input type="text" name='password' className="form-control" id="password"/>
                        </div>
                        <button type="submit" className="btn btn-primary">Login</button>
                    </form>
                </div>
            </div>
        </div>
    )
}