Проверка свойств реквизита в React
Я могу указать протипы classes в простом компоненте React NewButton.
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-плагин-реагировать.
Как правильно указать протипы classes.button?
Я добавил конкретное сообщение об ошибке в свой исходный пост.
Какую версию реакции вы используете? Эта ошибка появлялась до 7.12.3
Я использую eslint-plugin-react, v7.14.2.
Если вы используете машинописный текст, уже есть много четких решений.
Ответы 2
Я думаю, что вы ищете что-то вроде этого:
NewButton.propTypes = {
classes: PropTypes.shape({
button: PropTypes.shape({
display: PropTypes.string.isRequired
})
}).isRequired,
};
Что, поскольку ВЫ определяете эту структуру выше в этом файле, и она введена вами, я бы сказал, что это бессмысленно, иначе вы будете менять эту форму каждый раз, когда меняете свои стили.
Вы можете рассмотреть возможность игнорирования этой ошибки eslint и простого определения свойства верхнего уровня.
То же самое относится и к объекту темы Material UI — он массивный, и вы определенно не захотите определять эту форму в каждом компоненте, который использует весь свой объект темы (просто чтобы успокоить eslint)
Это может показаться неприятным, но я обнаружил, что есть компромиссы. Весь смысл PropTypes (для меня) заключается в том, чтобы определить ожидаемые свойства для потребителей этого файла. classes это определяется самим файлом.
Как насчет определения propTypes для объекта классов, чтобы он принимал любую внутреннюю структуру?
NewButton.propTypes = {
classes: PropTypes.objectOf(PropTypes.any).isRequired,
};
Таким образом, вам не нужно менять правила линтинга.
Какое конкретно предупреждение вы получаете для propTypes?