Преобразование функции пользовательского интерфейса материала в класс

Question

Как мне преобразовать функцию React в класс? Я не понимаю, как обновить const { classes } = props; в функции для использования в классе. Вот функция кнопок из пользовательского интерфейса материала: 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);

Answer 1

Вы также можете обернуть компонент приложения withStyles, передав объект стиля как arg.

Взгляните: Meet Material-UI - ваша новая любимая библиотека пользовательского интерфейса

export default withStyles(styles) (
  class App extends Component {
    constructor(props) {
      super(props);
    }

    render() {
      const { classes } = this.props;
      return (
        ...
      );
    }
  }
)

Answer 2

Просто добавьте это в рендер, вот так (измените его на this.props):

  render() {
    const { classes } = this.props;
    return (