导入文件时在响应中找不到错误模块

时间：2020-03-21 09:09:23

标签： reactjs react-native

我正在使用react js，并且当我从视图文件夹导入头文件时出现错误在我导入文件时在react中找不到模块。我想在我的索引页中添加头文件。当我在索引页上使用相同的代码时，它的工作正常，但当我想将此用作不同文件和文件夹中的组件时，则显示错误。

enter image description here 

import React from 'react';
    import { fade, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
    import AppBar from '@material-ui/core/AppBar';
    import Toolbar from '@material-ui/core/Toolbar';
    import IconButton from '@material-ui/core/IconButton';
    import Typography from '@material-ui/core/Typography';
    import InputBase from '@material-ui/core/InputBase';
    import Badge from '@material-ui/core/Badge';
    import MenuItem from '@material-ui/core/MenuItem';
    import Menu from '@material-ui/core/Menu';
    import MenuIcon from '@material-ui/icons/Menu';
    import SearchIcon from '@material-ui/icons/Search';
    import AccountCircle from '@material-ui/icons/AccountCircle';
    import MailIcon from '@material-ui/icons/Mail';
    import NotificationsIcon from '@material-ui/icons/Notifications';
    import MoreIcon from '@material-ui/icons/MoreVert';
    import CreateDialog from './Components/UserLoginSignUp/Signup';
    import CreateDialogLogin from './Components/UserLoginSignUp/Login';
    import './style.scss';
    const useStyles = makeStyles((theme: Theme) =>
      createStyles({
        grow: {
          flexGrow: 1,
        },
        menuButton: {
          marginRight: theme.spacing(2),
        },
        title: {
          display: 'none',
          [theme.breakpoints.up('sm')]: {
            display: 'block',
          },
        },
        search: {
          position: 'relative',
          borderRadius: theme.shape.borderRadius,
          backgroundColor: fade(theme.palette.common.white, 0.15),
          '&:hover': {
            backgroundColor: fade(theme.palette.common.white, 0.25),
          },
          marginRight: theme.spacing(2),
          marginLeft: 0,
          width: '100%',
          [theme.breakpoints.up('sm')]: {
            marginLeft: theme.spacing(3),
            width: 'auto',
          },
        },
        searchIcon: {
          padding: theme.spacing(0, 2),
          height: '100%',
          position: 'absolute',
          pointerEvents: 'none',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        },
        inputRoot: {
          color: 'inherit',
        },
        inputInput: {
          padding: theme.spacing(1, 1, 1, 0),
          // vertical padding + font size from searchIcon
          paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
          transition: theme.transitions.create('width'),
          width: '100%',
          [theme.breakpoints.up('md')]: {
            width: '20ch',
          },
        },
        sectionDesktop: {
          display: 'none',
          [theme.breakpoints.up('md')]: {
            display: 'flex',
          },
        },
        sectionMobile: {
          display: 'flex',
          [theme.breakpoints.up('md')]: {
            display: 'none',
          },
        },
      }),
    );

    export default function App() {
      const classes = useStyles();
      const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
      const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState<null | HTMLElement>(null);

      const isMenuOpen = Boolean(anchorEl);
      const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

      const handleProfileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget);
      };

      const handleMobileMenuClose = () => {
        setMobileMoreAnchorEl(null);
      };

      const handleMenuClose = () => {
        setAnchorEl(null);
        handleMobileMenuClose();
      };

      const handleMobileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
        setMobileMoreAnchorEl(event.currentTarget);
      };

      const menuId = 'primary-search-account-menu';
      const renderMenu = (
        <Menu
          anchorEl={anchorEl}
          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
          id={menuId}
          keepMounted
          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
          open={isMenuOpen}
          onClose={handleMenuClose}
        >
          <MenuItem onClick={handleMenuClose}><CreateDialog/></MenuItem>
          <MenuItem onClick={handleMenuClose}><CreateDialogLogin/></MenuItem>
        </Menu>
      );

      const mobileMenuId = 'primary-search-account-menu-mobile';
      const renderMobileMenu = (
        <Menu
          anchorEl={mobileMoreAnchorEl}
          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
          id={mobileMenuId}
          keepMounted
          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
          open={isMobileMenuOpen}
          onClose={handleMobileMenuClose}
        >
          <MenuItem>
            <IconButton aria-label="show 4 new mails" color="inherit">
              <Badge badgeContent={4} color="secondary">
                <MailIcon />
              </Badge>
            </IconButton>
            <p>Messages</p>
          </MenuItem>
          <MenuItem>
            <IconButton aria-label="show 11 new notifications" color="inherit">
              <Badge badgeContent={11} color="secondary">
                <NotificationsIcon />
              </Badge>
            </IconButton>
            <p>Notifications</p>
          </MenuItem>
          <MenuItem onClick={handleProfileMenuOpen}>
            <IconButton
              aria-label="account of current user"
              aria-controls="primary-search-account-menu"
              aria-haspopup="true"
              color="inherit"
            >
              <AccountCircle />
            </IconButton>
            <p>Profile</p>
          </MenuItem>
        </Menu>
      );

      return (
        <div className={classes.grow}>
          <AppBar position="static">
            <Toolbar>
              <IconButton
                edge="start"
                className={classes.menuButton}
                color="inherit"
                aria-label="open drawer"
              >
                <MenuIcon />
              </IconButton>
              <Typography className={classes.title} variant="h6" noWrap>
                Material-UI
              </Typography>
              <div className={classes.search}>
                <div className={classes.searchIcon}>
                  <SearchIcon />
                </div>
                <InputBase
                  placeholder="Search…"
                  classes={{
                    root: classes.inputRoot,
                    input: classes.inputInput,
                  }}
                  inputProps={{ 'aria-label': 'search' }}
                />
              </div>
              <div className={classes.grow} />
              <div className={classes.sectionDesktop}>
                <IconButton aria-label="show 4 new mails" color="inherit">
                  <Badge badgeContent={4} color="secondary">
                    <MailIcon />
                  </Badge>
                </IconButton>
                <IconButton aria-label="show 17 new notifications" color="inherit">
                  <Badge badgeContent={17} color="secondary">
                    <NotificationsIcon />
                  </Badge>
                </IconButton>
                <IconButton
                  edge="end"
                  aria-label="account of current user"
                  aria-controls={menuId}
                  aria-haspopup="true"
                  onClick={handleProfileMenuOpen}
                  color="inherit"
                >
                  <AccountCircle />
                </IconButton>
              </div>
              <div className={classes.sectionMobile}>
                <IconButton
                  aria-label="show more"
                  aria-controls={mobileMenuId}
                  aria-haspopup="true"
                  onClick={handleMobileMenuOpen}
                  color="inherit"
                >
                  <MoreIcon />
                </IconButton>
              </div>
            </Toolbar>
          </AppBar>
          {renderMobileMenu}
          {renderMenu}
        </div>
      );
    }

登录 

import React, { Fragment } from "react";

import {
  Button,
  FormControl,
  TextField,
  Grid,
  List,
  ListItem,
  ListItemText,
  Container
} from "@material-ui/core";

import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle
} from "@material-ui/core";
import { Component } from "react";
import FacebookIcon from '@material-ui/icons/Facebook';
function App() {
  return (
    <Container>
      <div className="App">
        <CreateDialogLogin />
      </div>
    </Container>
  );
}

export default App;

class CreateDialogLogin extends Component {
  state = {
    open: false
  };
  handler = () => {
    this.setState({
      open: !this.state.open
    });
  };
  render() {
    const { open } = this.state;
    return (
      <Fragment>
        <Button onClick={this.handler}>Login</Button>
        <Dialog aria-labelledby="form-dialog-title" open={open} onClose={this.handler} className="form_popup">

          <DialogContent>
            <Grid container>
              <Grid item xs={12} sm={6} id="content_side_userLS">
                <Grid>
                  {" "}
                  <h1>Login</h1>
                  <p>Simplified Stock <br/>Investments Like <br/>Never Before</p>
                  <List >
                        <ListItem>
                        <ListItemText primary="Invest across multiple asset classes." />
                        </ListItem>
                        <ListItem>
                        <ListItemText primary="Manage your own personalized portfolio." />
                        </ListItem>
                        <ListItem>
                        <ListItemText primary="Build wealth with experts’stock recommendations." />
                        </ListItem>
                    </List>
                </Grid>
              </Grid>
              <Grid item xs={12} sm={6} className="formSection formClass">
                  <Grid>
                <form noValidate autoComplete="off">
                  <FormControl className="input_field" fullWidth>
                    <TextField id="standard-basic" type="tel"  label="Enter Email/Mobile Number" />
                  </FormControl>
                  <FormControl className="input_field btnInput" fullWidth>
                    {" "}
                    <Button variant="contained" className="FormBtn" color="primary" disableElevation>
                      {" "}
                      Next{" "}
                    </Button>
                  </FormControl>
                </form>
                <div className="socialLogin">
                  <div className="fPass"><p><a href="">Forgot Password?</a></p></div> 
                  <span className="devider"></span> 
                   <p className="dviderV">New to invest19?  <a href="#text-buttons" color="primary">Sign Up</a>   |   Or Login using </p>
                    <a href="" className="link"><img src="/images/icons/facebook.svg"/>Facebook</a>
                    <a href="" className="link"><img src="/images/icons/gmail.svg"/>Google</a>
                </div>
                </Grid>
              </Grid>
            </Grid>
          </DialogContent>
        </Dialog>
      </Fragment>
    );
  }
}

0 个答案:

没有答案
相关问题
最新问题