如何将React函数转换为类?我不明白如何将函数中的 const { classes } = props;
更新为类使用 . 以下是Material UI中的按钮功能:https://material-ui-next.com/demos/buttons/
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
});
function RaisedButtons(props) {
const { classes } = props;
return (
<div>
<Button variant="raised" className={classes.button}>
Default
</Button>
<Button variant="raised" color="primary" className={classes.button}>
Primary
</Button>
<Button variant="raised" color="secondary" className={classes.button}>
Secondary
</Button>
<Button variant="raised" color="secondary" disabled className={classes.button}>
Disabled
</Button>
<input
accept="image/*"
className={classes.input}
id="raised-button-file"
multiple
type="file"
/>
<label htmlFor="raised-button-file">
<Button variant="raised" component="span" className={classes.button}>
Upload
</Button>
</label>
</div>
);
}
RaisedButtons.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(RaisedButtons);
这是我转换为React类组件 . 它目前给我一个 'classes' is not defined no-undef
的错误消息,因为我错过了classes = props部分 .
import React, { Component } from 'react';
import Button from 'material-ui/Button';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyTheme from './MyTheme';
import './App.css';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
});
class App extends Component {
constructor(props)
{
super(props);
}
render() {
return (
<MuiThemeProvider theme={MyTheme}>
<Button variant="raised" >
Default
</Button>
<Button variant="raised" color="primary" className={classes.button}>
Primary
</Button>
<Button variant="raised" color="secondary" className={classes.button} >
Secondary
</Button>
<Button variant="raised" color="secondary" className={classes.button}>
Disabled
</Button>
<input
accept="image/*"
className={classes.input}
id="raised-button-file"
multiple
type="file"
/>
<label htmlFor="raised-button-file">
<Button variant="raised" component="span" >
Upload
</Button>
</label>
</MuiThemeProvider>
);
}
}
App.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(App);
2 回答
只需将其添加到渲染中,就像这样(将其更改为
this.props
):您还可以包装withStyles应用程序的组件,将样式对象作为arg传递 .
看看:Meet Material-UI — your new favorite user interface library