TypeError：类是未定义的 ReactComponent。材料套件反应

Posted 2023-02-22

【中文标题】TypeError：类是未定义的 ReactComponent。材料套件反应

【英文标题】：TypeError: classes are undefined ReactComponent. Material-kit-react

【发布时间】：2018-11-07 17:45:18

【问题描述】：

我正在尝试在自己的项目中从材料套件中做一个小例子，但我无法让它工作。当我这样做时，我遇到的问题是在渲染中

const classes, ...rest = this.props;

从不工作导致类未定义。调试我发现我没有得到我的对象头，然后函数 __objectWithStyles 永远无法工作，因为在 this.props 中不是对象头。

有人可以帮助我吗？

我的登录页面.jsx

 import React from "react";
// material-ui components
import withStyles from "@material-ui/core/styles";
// core components
import Header from "components/Header/Header.jsx";
import HeaderLinks from "components/Header/HeaderLinks.jsx";    
import loginPageStyle from "assets/jss/material-kit-react/views/loginPage.jsx";

 class LoginPage extends React.Component 


 constructor(props) 
    super(props);
    // we use this to make the card to appear after the page has been rendered
    this.state = 
      cardAnimaton: "cardHidden"
    ;
  
  componentDidMount() 
    // we add a hidden class to the card and after 700 ms we delete it and the transition appears
    setTimeout(
      function() 
        this.setState( cardAnimaton: "" );
      .bind(this),
      700
    );
  
  render() 
    const  classes, ...rest  = this.props;
    return (
      <div>
        <Header
          absolute
          color="transparent"
          brand="Material Kit React"
          rightLinks=<HeaderLinks />
          ...rest
        />
        <div
          className=classes.pageHeader
          style=
            backgroundImage: "url(" + image + ")",
            backgroundSize: "cover",
            backgroundPosition: "top center"
          
        >
    );
    

导出 withStyles(loginPageStyle)(LoginPage);

HeaderPage.jsx

import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// material-ui components
import withStyles from "material-ui/styles/withStyles";
import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar";
import IconButton from "material-ui/IconButton";
import Button from "material-ui/Button";
import Hidden from "material-ui/Hidden";
import Drawer from "material-ui/Drawer";
// @material-ui/icons
import Menu from "@material-ui/icons/Menu";
// core components
import headerStyle from "assets/jss/material-kit-react/components/headerStyle.jsx";

class Header extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      mobileOpen: false
    ;
    this.handleDrawerToggle = this.handleDrawerToggle.bind(this);
    this.headerColorChange = this.headerColorChange.bind(this);
  
  handleDrawerToggle() 
    this.setState( mobileOpen: !this.state.mobileOpen );
  
  componentDidMount() 
    if (this.props.changeColorOnScroll) 
      window.addEventListener("scroll", this.headerColorChange);
    
  
  headerColorChange() 
    const  classes, color, changeColorOnScroll  = this.props;
    const windowsScrollTop = window.pageYOffset;
    if (windowsScrollTop > changeColorOnScroll.height) 
      document.body
        .getElementsByTagName("header")[0]
        .classList.remove(classes[color]);
      document.body
        .getElementsByTagName("header")[0]
        .classList.add(classes[changeColorOnScroll.color]);
     else 
      document.body
        .getElementsByTagName("header")[0]
        .classList.add(classes[color]);
      document.body
        .getElementsByTagName("header")[0]
        .classList.remove(classes[changeColorOnScroll.color]);
    
  
  componentWillUnmount() 
    if (this.props.changeColorOnScroll) 
      window.removeEventListener("scroll", this.headerColorChange);
    
  
  render() 
    const 
      classes,
      color,
      rightLinks,
      leftLinks,
      brand,
      fixed,
      absolute
     = this.props;
    const appBarClasses = classNames(
      [classes.appBar]: true,
      [classes[color]]: color,
      [classes.absolute]: absolute,
      [classes.fixed]: fixed
    );
    const brandComponent = (
      <Button href="#" className=classes.title>
        brand
      </Button>
    );
    return (
      <AppBar className=appBarClasses>
        <Toolbar className=classes.container>
          leftLinks !== undefined ? brandComponent : null
          <div className=classes.flex>
            leftLinks !== undefined ? (
              <Hidden smDown implementation="css">
                leftLinks
              </Hidden>
            ) : (
              brandComponent
            )
          </div>
          <Hidden smDown implementation="css">
            rightLinks
          </Hidden>
          <Hidden mdUp>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              onClick=this.handleDrawerToggle
            >
              <Menu />
            </IconButton>
          </Hidden>
        </Toolbar>
        <Hidden mdUp implementation="css">
          <Drawer
            variant="temporary"
            anchor="right"
            open=this.state.mobileOpen
            classes=
              paper: classes.drawerPaper
            
            onClose=this.handleDrawerToggle
          >
            <div className=classes.appResponsive>
              leftLinks
              rightLinks
            </div>
          </Drawer>
        </Hidden>
      </AppBar>
    );
  


Header.defaultProp = 
  color: "white"
;

Header.propTypes = 
  classes: PropTypes.object.isRequired,
  color: PropTypes.oneOf([
    "primary",
    "info",
    "success",
    "warning",
    "danger",
    "transparent",
    "white",
    "rose",
    "dark"
  ]),
  rightLinks: PropTypes.node,
  leftLinks: PropTypes.node,
  brand: PropTypes.string,
  fixed: PropTypes.bool,
  absolute: PropTypes.bool,
  // this will cause the sidebar to change the color from
  // this.props.color (see above) to changeColorOnScroll.color
  // when the window.pageYOffset is heigher or equal to
  // changeColorOnScroll.height and then when it is smaller than
  // changeColorOnScroll.height change it back to
  // this.props.color (see above)
  changeColorOnScroll: PropTypes.shape(
    height: PropTypes.number.isRequired,
    color: PropTypes.oneOf([
      "primary",
      "info",
      "success",
      "warning",
      "danger",
      "transparent",
      "white",
      "rose",
      "dark"
    ]).isRequired
  )
;

export default withStyles(headerStyle)(Header);

有一个来自 src 存储库的链接：https://github.com/creativetimofficial/material-kit-react/

更新

我的类 LoginPagte 似乎找不到我导入的组件。例如。

从“components/Header/Header.jsx”导入Header；

我的班级找不到 Header 对象

【参考方案1】：

也许我来得太晚了。但是，我遇到了类似的问题。我做了一点改动，它开始正常工作了。

之前：import Register from "./Register/Register";

之后：import Register from "./Register/Register";

只是从根组件中的注册组件导入中删除“”对我有用。是的，你当然需要：export default withStyles(styles)(Register);

【参考方案2】：

这意味着您没有将classes 传递给您的LoginPage。我猜你想用withStyles 包裹它，它将classes 注入到组件中：

export withStyles(loginPageStyle)(LoginPage)

然后在你使用LoginPage的地方使用它。

【讨论】：

我忘了放入我的样品中......我有它。但仍然无法正常工作...已在帖子中编辑。

【参考方案3】：

以这种方式添加classes作为组件的prop：

   class LoginPage extends React.Component< classes , > 

        ...
    

【讨论】：

不工作，类未定义...我认为我的导入有问题。我的班级似乎无法读取我导入的对象。