将 Material UI 函数转换为类答案

【问题标题】：Converting Material UI function to a class将 Material UI 函数转换为类
【发布时间】：2018-10-08 14:54:13
【问题描述】：

如何将 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);

【问题讨论】：

只需将该行放入您的render() 函数中即可。
为什么需要 muiThemeProvider？

标签： javascript reactjs material-ui

【解决方案1】：

只需将其添加到渲染中，就像这样（将其更改为 this.props）：

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

【讨论】：

谢谢特德！那行得通！你能解释一下道具部分吗？我不完全理解为什么 'const { classes } = this.props;' 中的类指 'const styles = theme => ({' ... });
我不太清楚你的意思，classes 是作为 props 传递给你的组件的，那一行只是解构了传递的 props
我的困惑是它在 const { classes } = this.props; 中被称为“类”，而不是“样式”。如果它是 const { styles } = this.props; 对我来说更有意义那会把两者联系在一起。原谅我的无知，我是 React 和 JavaScript 的新手。我试图理解我的代码 - 而不仅仅是让它工作。 :)
@Bethany props 有一个名为 classes 的键。 const { classes } = this.props; 等价于 const classes = this.props.classes。我在您的原始代码中没有看到任何引用 styles 的内容，所以我不确定它来自哪里。
哦！这更有意义。谢谢你的澄清。我指的是： const styles = theme => ({ button: { margin: theme.spacing.unit, }, input: { display: 'none', }, });

【解决方案2】：

您可以将功能组件转换为类基础组件。

使用普通的 CSS。
使用 import { withStyles } from "@material-ui/core/styles";对于 HOC。
使用 const { classes } = this.props;

功能组件

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);**

【讨论】：

【解决方案3】：

您还可以包装 withStyles 应用程序的组件，将样式对象作为 arg 传递。

看一看：Meet Material-UI — your new favorite user interface library

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

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

【讨论】：