Question

我目前正在学习reactjs以创建一个小应用程序所以我从github下载了this template并开始探索它以了解reactjs的工作原理。

后来我想在同一个模板下创建一个登录页面所以我这样做了：
在视图下我在Login文件夹中创建了新页面Login.jsx
路径：views / Login / Login.jsx

import React from "react";
import { Grid } from "material-ui";

import {
  ItemGrid
} from "components";

function Login({ ...props }) {
  return (
    <div>
      <Grid container>
        <ItemGrid xs={12} sm={12} md={4}>
          test loginpage
        </ItemGrid>
      </Grid>
    </div>
  );
}

export default Login;

然后我在app.jsx中导入它并在appRoutes

下创建了一条新路线

路径：routes / app.jsx

const appRoutes = [
  {
    path: "/login",
    component: LoginPage,
  },
 ....
]

然后我对主容器App.jsx进行了此更改：
路径：containers / App / App.jsx
我创建了一个方法getLogin

getLogin() {
  return this.props.location.pathname !== "/login";
}

我改变了

<Sidebar
    routes={appRoutes}
  logoText={"RecBot Cpanel"}
  logo={logo}
  image={image}
  handleDrawerToggle={this.handleDrawerToggle}
  open={this.state.mobileOpen}
  color="blue"
  {...rest}
/>

进入这个

{this.getLogin() ? (
  <Sidebar
    routes={appRoutes}
    logoText={"RecBot Cpanel"}
    logo={logo}
    image={image}
    handleDrawerToggle={this.handleDrawerToggle}
    open={this.state.mobileOpen}
    color="blue"
    {...rest}
  />

) : (
    <div></div>
  )}

以隐藏侧栏在登录页面中的显示。

最后当我尝试运行应用程序时，登录页面工作正常但在任何其他路由中我收到此错误：

元素类型无效：需要一个字符串（用于内置组件）   或类/函数（对于复合组件）但得到：undefined。您   可能忘记从您定义的文件中导出组件，   或者您可能混淆了默认导入和命名导入。

检查Sidebar。
的渲染方法

这是侧边栏组件：

import React from "react";
import PropTypes from "prop-types";
import { NavLink } from "react-router-dom";
import cx from "classnames";
import {
  withStyles,
  Drawer,
  Hidden,
  List,
  ListItem,
  ListItemIcon,
  ListItemText
} from "material-ui";

import { HeaderLinks } from "components";

import sidebarStyle from "variables/styles/sidebarStyle.jsx";

const Sidebar = ({ ...props }) => {
  // verifies if routeName is the one active (in browser input)
  function activeRoute(routeName) {
    return props.location.pathname.indexOf(routeName) > -1 ? true : false;
  }
  const { classes, color, logo, image, logoText, routes } = props;
  var links = (
    <List className={classes.list}>
      {routes.map((prop, key) => {
        if (prop.redirect) return null;
        const listItemClasses = cx({
          [" " + classes[color]]: activeRoute(prop.path)
        });
        const whiteFontClasses = cx({
          [" " + classes.whiteFont]: activeRoute(prop.path)
        });
        return (
          <NavLink
            to={prop.path}
            className={classes.item}
            activeClassName="active"
            key={key}
          >
            <ListItem button className={classes.itemLink + listItemClasses}>
              <ListItemIcon className={classes.itemIcon + whiteFontClasses}>
                <prop.icon />
              </ListItemIcon>
              <ListItemText
                primary={prop.sidebarName}
                className={classes.itemText + whiteFontClasses}
                disableTypography={true}
              />
            </ListItem>
          </NavLink>
        );
      })}
    </List>
  );
  var brand = (
    <div className={classes.logo}>
      <a href="https://www.creative-tim.com" className={classes.logoLink}>
        <div className={classes.logoImage}>
          <img src={logo} alt="logo" className={classes.img} />
        </div>
        {logoText}
      </a>
    </div>
  );
  return (
    <div>
      <Hidden mdUp>
        <Drawer
          variant="temporary"
          anchor="right"
          open={props.open}
          classes={{
            paper: classes.drawerPaper
          }}
          onClose={props.handleDrawerToggle}
          ModalProps={{
            keepMounted: true // Better open performance on mobile.
          }}
        >
          {brand}
          <div className={classes.sidebarWrapper}>
            <HeaderLinks />
            {links}
          </div>
          {image !== undefined ? (
            <div
              className={classes.background}
              style={{ backgroundImage: "url(" + image + ")" }}
            />
          ) : null}
        </Drawer>
      </Hidden>
      <Hidden smDown>
        <Drawer
          anchor="left"
          variant="permanent"
          open
          classes={{
            paper: classes.drawerPaper
          }}
        >
          {brand}
          <div className={classes.sidebarWrapper}>{links}</div>
          {image !== undefined ? (
            <div
              className={classes.background}
              style={{ backgroundImage: "url(" + image + ")" }}
            />
          ) : null}
        </Drawer>
      </Hidden>
    </div>
  );
};

Sidebar.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(sidebarStyle)(Sidebar);

我做错了什么？

Answer 1

您需要做的是检查icon对象中是否存在prop

{prop.icon && <prop.icon />}

这样你就可以保留你的图标（如果它们存在的话）并避免错误。

您可以看到此page以了解有关条件渲染的更多信息。

向reactjs模板添加新页面

1 个答案: