Question

我了解React代码的基本原理，例如将数据传递给子组件以及使用props将数据传递回父组件。我在下面的React Material UI中遇到了这段代码，这有点令人困惑。希望得到一些解释。

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

这是我的理解。

1。该组件接受props，因此我可以将数据向下传递给此子组件，并且在渲染之前，它将从props.classes中提取classes属性。

2。有一个样式函数，该函数接受一个主题变量并返回对象进度，该进度具有某些样式，供class.progress

使用。

3.withStyle是某种高阶组件。

但是，基于这些知识，此代码有些令人困惑。

代码如何执行class.progress，为什么class变量与进度样式有关

的目的是什么

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

Answer 1

作为道具传递的

classes变量是一个对象，进度是其关键之一。类对象看起来像

classes = {
   progress: 'half'
}

现在将在上述类对象中为half的classes.progress的值分配为CircularProgress组件的className属性。

关于

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

以上语法是为组件添加类型检查功能。 React具有一些内置的类型检查功能。要对组件的道具进行类型检查，您可以分配特殊的propTypes属性。

在您的情况下，这意味着CircularIndeterminate期望道具classes的类型为object，并且是必需道具。

要了解有关PropType的更多信息，请访问 the docs

用道具解释Material UI语法

1 个答案: