React関数をクラスに変換するにはどうすればよいですか?関数のconst { classes } = props;
をクラス使用に更新する方法がわかりません。マテリアル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クラスコンポーネントへの変換です。現在、classs = propsの部分がないため、'classes' is not defined no-undef
のエラーメッセージが表示されます。
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);
次のようにレンダーに追加します(this.props
に変更します):
render() {
const { classes } = this.props;
return (
また、withStylesアプリケーションのコンポーネントをラップして、スタイルオブジェクトをargとして渡すこともできます。
ご覧ください: Meet Material-UI —新しいお気に入りのユーザーインターフェイスライブラリ
export default withStyles(styles) (
class App extends Component {
constructor(props) {
super(props);
}
render() {
const { classes } = this.props;
return (
...
);
}
}
)
機能コンポーネントをクラスベースコンポーネントに変換できます。
機能部品
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>
);
}
クラスベースコンポーネント
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);**