我正在研究使用ESLint(Airbnb配置)和React / Redux .
下面的代码是一个标准类型的React / Redux类,我写这篇文章是为了享受Airbnb的所有linting规则 .
通过了解Airbnb的配置偏好我已经解决了大部分的掉毛错误,但是,目前我还有几个方面不了解 . 这些是:
- 整个方法renderTableHeader()以红色标出,ESLint告诉我:
[eslint]期望'this'由类方法'renderTableHeader'使用 . (class-methods-use-this)(JSX属性)className:string没有其他方法有这个linting问题
- 我将一个对象从Redux状态连接到props(包含我需要在这个类中迭代的许多键/对象) . ESLint似乎不喜欢我将对象从状态连接到道具......给我的消息:
[eslint]禁止Prop类型对象(react / forbid-prop-types)导入PropTypes
我的状态对象是一个包含许多引用用户对象的键的对象 - 所以我需要 users
作为一个对象 . 这是不好的做法吗?如果没有出现这个lint消息,我将如何连接一个要映射的对象?
在此先感谢...这是我的 class :
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { getUsers } from '../actions/getUsers';
import setUserMarketingPref from '../actions/setUserMarketingPref';
import { setFilter } from '../actions/setFilter';
import TableRow from '../components/TableRow';
import '../styles/styles.css';
class AppContainer extends Component {
componentDidMount() {
this.props.getUsers();
}
renderTableHeader() {
return (
<div className="table__header">
<div className="table__header--name">Name</div>
<div className="table__header--gender">Gender</div>
<div className="table__header--region">Region</div>
</div>
);
}
renderTable() {
const { users, filterMode } = this.props;
const usersView = filterMode ? _.omitBy(users, user => !user.checked) : users;
return _.map(usersView, user => (
<TableRow
user={user}
key={user.id}
setUserMarketingPref={_.debounce(() => this.props.setUserMarketingPref(user.id), 100)}
/>
));
}
renderFilters() {
return (
<div className="table__buttons">
<button
id="marketing-other"
className="table__other"
onClick={e => this.props.setFilter(e.target.id)}
>Other filter
</button>
<button
id="marketing-none"
className="table__no-marketing"
onClick={e => this.props.setFilter(e.target.id)}
>No marketing
</button>
</div>
);
}
render() {
if (!_.size(this.props.users)) {
return null;
}
return (
<div className="table__container">
{this.renderTableHeader()}
{this.renderTable()}
{this.renderFilters()}
</div>
);
}
}
const mapDispatchToProps = dispatch => bindActionCreators(
{
getUsers,
setUserMarketingPref,
setFilter,
},
dispatch,
);
const mapStateToProps = state => ({
users: state.users,
filter: state.filter,
filterMode: state.marketing.filterMode,
});
AppContainer.defaultProps = {
filterMode: false,
getUsers: null,
setUserMarketingPref: null,
setFilter: null,
};
AppContainer.propTypes = {
users: PropTypes.object,
filterMode: PropTypes.bool,
getUsers: PropTypes.func,
setUserMarketingPref: PropTypes.func,
setFilter: PropTypes.func,
};
export default connect(mapStateToProps, mapDispatchToProps)(AppContainer);
1 回答
这两条规则涉及两个不同的事情
根据 documentation
如果类方法不使用它,有时可以将其作为静态函数 . 如果您确实将方法转换为静态函数,则调用该特定方法的类的实例也必须转换为静态调用
(MyClass.callStaticMethod())
另请注意,在上面的示例中,如果将方法切换为静态方法,则必须将调用静态方法
(let a = new A(); a.sayHi();)
的类的实例更新为静态调用(A.sayHi();)
,而不是让类的实例调用该方法How to avoid having this warning
exceptMethods
选项允许您传递要忽略警告的方法名称数组 . 例如,您可能有一个来自外部库的规范要求您将方法覆盖为常规函数(而不是静态方法),并且不在函数体内使用它 . 在这种情况下,您可以在警告中添加要忽略的方法 .定义不模糊的PropType是一个很好的做法,例如
any
,array
,object
,它们没有清楚地告诉你实际上是什么类型的道具 .根据 documentation
默认情况下,此规则可防止含有更多特定替代项的模糊prop类型(any,array,object),但如果需要,可以禁用任何prop类型 . 选择默认值是因为它们具有明显的替代品 . 任何东西都应该被替换 . 数组和对象可以分别替换为arrayOf和shape .
在你的情况下说
user
是一个像对象你可以定义PropType之类的