如何将Material UI函数组件转为类组件？React类组件如何处理classes？

嘿，我刚好做过类似的转换，来一步步帮你理清楚：

首先，先补全你提到的Material UI RaisedButton函数组件完整示例：

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 RaisedButton(props) {
  const { classes } = props;
  return (
    <div>
      <Button variant="raised" className={classes.button}>
        Raised Button
      </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>
  );
}

RaisedButton.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(RaisedButton);

接下来是转换后的类组件版本，重点看classes的适配方式：

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',
  },
});

class RaisedButton extends React.Component {
  render() {
    // 类组件中通过this.props获取传入的属性，解构classes的逻辑和函数组件一致
    const { classes } = this.props;
    
    return (
      <div>
        <Button variant="raised" className={classes.button}>
          Raised Button
        </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>
    );
  }
}

RaisedButton.propTypes = {
  classes: PropTypes.object.isRequired,
};

// withStyles高阶组件的用法和函数组件完全一致，直接包裹类组件导出即可
export default withStyles(styles)(RaisedButton);

核心要点说明： #

• 组件结构变化：从函数式定义改成继承React.Component的ES6类，所有渲染逻辑放到render()方法中
• props的访问方式：类组件里所有传入的属性都要通过this.props获取，所以解构classes时要写成const { classes } = this.props;，你也可以直接在JSX里用this.props.classes.button（不用解构也能正常使用）
• withStyles的兼容性：不管是函数组件还是类组件，withStyles的用法完全相同，它负责把样式对象注入为组件的classes属性
• PropTypes定义：类组件的PropTypes直接挂载到类上即可，和函数组件的写法一致

如果你的组件需要处理状态，还可以在类的构造函数里初始化this.state，这也是类组件在无Hook时代处理状态的标准方式。

内容的提问来源于stack exchange，提问作者Bethany