Comment convertir une fonction React en classe? Je ne comprends pas comment mettre à jour const { classes } = props;
dans une fonction à utiliser en classe. Voici une fonction de bouton de 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);
Voici ma conversion en un composant de classe React. Il me donne actuellement un message d'erreur de 'classes' is not defined no-undef
car il me manque la partie classes = accessoires.
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);
Ajoutez simplement cela dans le rendu, comme ceci (changez-le en this.props
):
render() {
const { classes } = this.props;
return (
Vous pouvez également envelopper le composant de l'application withStyles, en passant l'objet style sous la forme arg.
Jetez un œil: Meet Material-UI - votre nouvelle bibliothèque d'interface utilisateur préférée
export default withStyles(styles) (
class App extends Component {
constructor(props) {
super(props);
}
render() {
const { classes } = this.props;
return (
...
);
}
}
)
Vous pouvez convertir des composants fonctionnels en composants de base de classe.
Composants fonctionnels
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
const useStyles = makeStyles(theme => ({
root: {
marginLeft: 250,
marginRight: 10
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular
}
}));
export default function SimpleExpansionPanel() {
const classes = useStyles();
return (
<div className={classes.root}>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header">
<Typography className={classes.heading}>Expansion Panel 1</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
);
}
Composant de base de classe
import React from "react";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
**import { withStyles } from "@material-ui/core/styles";**
const useStyles = theme => ({
root: {
marginLeft: 250,
marginRight: 10
},
heading: {
**fontSize: "1rem",**
fontWeight: theme.typography.fontWeightRegular
}
});
class SimpleExpansionPanel extends React.Component {
render() {
**const { classes } = this.props;**
return (
<div className={classes.root}>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header">
<Typography className={classes.heading}>
Expansion Panel 1
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
eget.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
);
}
}
**export default withStyles(useStyles)(SimpleExpansionPanel);**