代码之家 › 专栏 › 技术社区 › Scott

Reactjs.NET-道具没有定义,为什么会被卡住?

reactjs.net material-ui react-router reactjs

Scott · 技术社区 · 6 年前

所以我仍然在用reactjs.net+asp.net内核找到我的脚。我已经将material-ui.com的最新版本(v1)导入到这个组合中。我试图将两者结合起来,但在类/道具组合方面有问题。

下面的代码是一字不差地告诉我需要什么,并通过几个小时的在线搜索找到。然而, this.props.classes 继续投掷 undefined

我是不是少了一步?

import React, { Component } from 'react';

import PropTypes from 'prop-types';

import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';



const homeStyles = {
  root: {
    height: 200 ,
    flexGrow: 1,
  },

  grow: {
    flexGrow: 1,
  },

  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
};


export class Home extends React.Component {


    displayName = Home.name

    constructor(props) { 
        super(props);
        console.log("Props: " + props != null);
    }

  render() {

      const { classes } = this.props;

      return (
         <div>
            <div className={classes.root}>
            <AppBar position="static">
            <Toolbar>
              <IconButton style={classes.menuButton} color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
              <Typography variant="h6" color="inherit" style={classes.grow}>Undefined? {(this.props == undefined).toString()}</Typography>
              <Button color="inherit">Login</Button>
            </Toolbar>
          </AppBar>
          </div>
        </div>
    );

   }
}

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

export default withStyles(homeStyles)(Home)