React Material UI:this.props在与Styles和React Router一起使用时未定义

Question

在父组件中，this.ops存在，并且可以找到｛classes｝。但是，在子组件中，this.ops未定义，并且找不到｛classes｝。两者都封装在HOC中，但子组件是通过React Router渲染的。下面的相关代码，如果你需要更多的上下文，请告诉我：

父级：

import React, { Component } from "react";
import { withStyles } from '@material-ui/core/styles';
...
import styles from "../../assets/ParentPage/styles";
import theme from "../../assets/theme";
import LandingPageCard from './ParentPageCard';
import { Grid, ThemeProvider } from "@material-ui/core";
import { ChildComponent } from "../../components/NRLMSIS/MsisForm";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export class ParentPage extends Component {
constructor(props) {
super(props);
}
render() {
const { classes } = this.props;
return (
<ThemeProvider theme={theme}>
<Router>
<Grid
container
spacing={4}
className={classes.gridContainer}
justify="center"
>
<Grid item xs={12} sm={6} md={4}>
<Link to="/child">
<LandingPageCard />
</Link>
</Grid>
</Grid>
<Switch>
<Route path="/child" component={ChildComponent} />
</Switch>
</Router>
</ThemeProvider>
);
}
}

儿童：

import React, {Component} from "react";
...
import theme from "../../assets/theme";
import styles from "../../assets/ChildCompnent/styles";
export class ChildCompnent extends Component {
constructor(props) {
super(props);
render() {
const { classes } = this.props;
console.log("PROPS: ", this.props); // this.props == undefined
return (
<Grid container component="main" className={classes.root}>
<CssBaseline/>
</Grid>
);
}
}
}
export default withStyles(styles)(ChildCompnent);

Answer 1

您确实导出了默认值，并且导入是使用{}，这是有效的，因为您向类添加了导出，但您有另一个带有样式的导出(默认值(。。。do:

import  ChildComponent from "../../components/NRLMSIS/MsisForm";