reactjs - TypeError:类是未定义的 ReactComponent。材料套件反应
问题描述
我正在尝试在自己的项目中从材料套件中做一个小例子,但我无法让它工作。当我做的时候,我遇到的问题是在渲染中
const { 类, ...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 对象
解决方案
也许我为时已晚。但是,我遇到了类似的问题。我做了一点改变,它开始工作正常。
前:import {Register} from "./Register/Register";
后:import Register from "./Register/Register";
只是从根组件中的注册组件的导入中删除“{}”对我有用。是的,你当然需要:export default withStyles(styles)(Register);
推荐阅读
- node.js - Openlayers 包 3.15.1 在构建时使用 v5.3.0 生成 ol.js 缩小文件
- angular - 将属性添加到表中,以便我可以在其上使用 css
- powershell - Exchange 获取最后一个活动不早于的活动邮箱
- c++ - 如何从窗口中删除 TOPMOST 属性
- reactjs - 如何使用预定义的数组初始化一个空的对象数组?
- c# - 如何将具有日期时间的列中的每个单元格从 ms excel 插入到 mysql 数据库?
- c# - 更改 Intellisense 快速信息参数背景/前景色
- c - C:赋值运算符是否深拷贝?
- python - 使用 python pytesseract 从图像中提取文本
- java - Java 9 Splashscreen 问题与 Splashscreen.getSplashScreen();