我将我的小项目重写为material-ui,我正在使用这个材料-ui-next reactjs库; 对于一个组件withStyle decorator工作得很好,另一个组件没有用样式装饰组件并且拖出这个错误:
未捕获的TypeError:无法读取属性' root'未定义的 在Respondent.render(MuiRespondent.tsx:48) 在vendor.js?v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeiaBZq7AE:30228 at measureLifeCyclePerf(vendor.js?v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeiaBZq7AE:29508) 在ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (?vendor.js V = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30227) 在ReactCompositeComponentWrapper._renderValidatedComponent(vendor.js?v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeiaBZq7AE:30254) 在ReactCompositeComponentWrapper.performInitialMount(vendor.js?v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeiaBZq7AE:29794) 在ReactCompositeComponentWrapper.mountComponent(vendor.js?v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeiaBZq7AE:29690) at Object.mountComponent(vendor.js?v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeiaBZq7AE:12868) 在ReactCompositeComponentWrapper._updateRenderedComponent(vendor.js?v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeiaBZq7AE:30197) 在ReactCompositeComponentWrapper._performComponentUpdate(vendor.js?v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeiaBZq7AE:30156)
抛出错误的组件:
import * as React from 'react';
import Button from 'material-ui/Button';
import Dialog, {
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
} from 'material-ui/Dialog';
import Typography from 'material-ui/Typography';
import withStyles, { WithStyles, StyleRulesCallback } from 'material-ui/styles/withStyles';
import { RouteComponentProps } from 'react-router';
import withRoot from '../../withRoot';
const styles: StyleRulesCallback<'root'> = theme => ({
root: {
textAlign: 'center',
paddingTop: theme.spacing.unit * 20,
},
});
type State = {
open: boolean;
};
export class Respondent extends React.Component<WithStyles<'root'>, State> {
constructor(props: any){
super(props);
this.state = {
open: false,
}
};
handleClose = () => {
this.setState({
open: false,
});
};
handleClick = () => {
this.setState({
open: true,
});
};
render() {
return (
<div className={this.props.classes.root}>
<Dialog open={this.state.open} onClose={this.handleClose}>
<DialogTitle>Super Secret Password</DialogTitle>
<DialogContent>
<DialogContentText>1-2-3-4-5</DialogContentText>
</DialogContent>
<DialogActions>
<Button color="primary" onClick={this.handleClose}>
OK
</Button>
</DialogActions>
</Dialog>
<Typography variant="display1" gutterBottom>
Material-UI
</Typography>
<Typography variant="subheading" gutterBottom>
example project
</Typography>
<Button variant="raised" color="secondary" onClick={this.handleClick}>
Super Secret Password
</Button>
</div>
);
}
}
export default withRoot(withStyles(styles)<{}>(Respondent));
这是我的withRoot装饰器:
import * as React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import * as colors from 'material-ui/colors';
import CssBaseline from 'material-ui/CssBaseline';
// A theme with custom primary and secondary color.
// It's optional.
const theme = createMuiTheme({
palette: {
primary: colors.lightBlue,
secondary: colors.blueGrey,
},
});
function withRoot(Component: React.ComponentType) {
function WithRoot(props: object) {
// MuiThemeProvider makes the theme available down the React tree
// thanks to React context.
return (
<MuiThemeProvider theme={theme}>
<div>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...props} />
</div>
</MuiThemeProvider>
);
}
return WithRoot;
}
export default withRoot;
withStyle decorator工作的另一个组件看起来几乎完全相同,我想我错过了一些显而易见但却无法看到的内容