Reactjs 使用说明的道具反应材质UI语法

我了解react代码的基本功能，例如使用props将数据传递给子组件和将数据传递回父组件。我在下面遇到了这段代码，它有点让人困惑。希望得到一些解释

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
import purple from '@material-ui/core/colors/purple';

const styles = theme => ({
  progress: {
    margin: theme.spacing.unit * 2,
  },
});

function CircularIndeterminate(props) {
  const { classes } = props;
  return (
    <div>
      <CircularProgress className={classes.progress} />
      <CircularProgress className={classes.progress} size={50} />
      <CircularProgress className={classes.progress} color="secondary" />
      <CircularProgress className={classes.progress} style={{ color: purple[500] }} thickness={7} />
    </div>
  );
}

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

export default withStyles(styles)(CircularIndeterminate);

---

作为道具传入的classes变量是一个对象，进度是其关键之一。类对象可能看起来像

classes = {
   progress: 'half'
}

现在，上面的class对象中class.progress的值是

half

被指定为CircularProgress组件的className属性

关于

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

上面的语法是向组件添加类型检查功能。React具有一些内置的类型检查功能。要对组件的道具运行类型检查，可以指定特殊的

propTypes

属性

在您的情况下，这意味着

循环确定

需要一个属性

类

，该属性类型为

对象

，是必需的属性

要了解更多关于PropTypes的信息，请访问

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