Question

我可以在一个简单的React组件NewButton中指定classes的proTypes。

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

const styles = () => ({
  button: {
    display: 'inline-flex',
  },
});

function NewButton(props) {
  const { classes } = props;

  return <Button className={classes.button} variant="outlined" />;
}

NewButton.propTypes = {
  classes: PropTypes.shape({}).isRequired,
};

export default withStyles(styles)(NewButton);

但是我收到eslint-plugin-react的错误'classes.button' is missing in props validation eslint(react/prop-types)。

还要指定classes.button的proType的正确方法是什么？

Answer 1

我认为您正在寻找的是这样的东西：

NewButton.propTypes = {
  classes: PropTypes.shape({
    button: PropTypes.shape({
      display: PropTypes.string.isRequired
    })
  }).isRequired,
};

由于您在此文件的上方定义了该结构，并且由您注入了该结构，因此我认为这毫无意义，否则每次更改样式时都将更改此形状。

您可能会考虑忽略此错误，而只是定义顶级属性。

Material UI主题对象也是如此-它很大，您绝对不想在使用了整个主题对象的每个组件中都定义该形状（只是为了安抚）

这样做可能感觉很不好，但是我发现存在一些折衷。 PropTypes的重点（对我而言）是为该文件的使用者定义预期的属性。 classes由文件本身定义。

Answer 2

如何为class对象定义propTypes以接受任何内部结构？

NewButton.propTypes = {
    classes: PropTypes.objectOf(PropTypes.any).isRequired,
};

这样，您无需更改起毛规则。

在React中对道具属性进行道具验证

2 个答案: