React 中道具属性的道具验证

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 的 proTypes 的正确方法是什么？

Answer 1

我想你要找的是这样的：

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

既然你在这个文件中定义了上面的结构，并且它是由你注入的，我认为这是没有意义的，否则你每次改变你的样式时都会改变这个形状。

你可以考虑eslint-忽略这个错误，简单定义顶层属性.

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

这样做可能感觉不好，但我发现需要权衡取舍。 PropTypes 的全部意义（对我而言）是为该文件的消费者定义预期的属性。 classes 是由文件本身定义的。

Answer 2

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

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

这样，您就不需要更改 linting 规则。

React 中道具属性的道具验证

Props validation for props' properties in React

reactjs

material-ui

react-props