时间戳

首页 > 解决方案 > 在 React 中对 props 的属性进行 Props 验证

reactjs - 在 React 中对 props 的属性进行 Props 验证

问题描述

我可以classes在一个简单的 React 组件 NewButton 中指定 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);

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

指定 proTypes 的正确方法是classes.button什么？

标签： reactjsmaterial-uireact-props

解决方案

我认为你正在寻找的是这样的：

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

其中，由于您在此文件中定义了上面的结构，并且它是由您注入的，因此我认为这是没有意义的，否则您每次更改样式时都会更改此形状。

您可以考虑 eslint-忽略此错误并简单地定义顶级属性。

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

这样做可能会让人感觉很糟糕，但我发现有一些权衡。PropTypes 的全部意义（对我来说）是为这个文件的消费者定义预期的属性。由文件本身classes定义。

推荐阅读