; } - 正确例子 // filename: MyComponent.jsx function MyComponent() { return

; } [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md) **[⬆ 回到目录](#目录)** ## react/jsx-no-comment-textnodes - 规则含义禁止在jsx文本节点中出现注释(行和块注释) - 规则原因防止开发者以为注释了内容,实际没有,导致输出错误信息的问题 - 错误例子 class Hello extends React.PureComponent{ render() { return (

// empty div

) } } - 正确例子 class Hello extends React.PureComponent{ render() { return

{// empty div }

; } } [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-comment-textnodes.md) **[⬆ 回到目录](#目录)** ## react/no-render-return-value - 规则含义禁止使用 `React.render/ReactDOM.render`的返回值 - 规则原因这个返回值是对根元素的引用,但是以后有可能会使用异步渲染为了防止以后升级版本可能出现的问题,不要用,如果要获取dom,使用ref - 错误例子 const inst = ReactDOM.render(, document.body); doSomethingWithInst(inst); - 正确例子 ReactDOM.render(, document.body); [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-render-return-value.md) **[⬆ 回到目录](#目录)** ## react/no-find-dom-node - 规则含义禁止使用findDOMNode方法, 用 ref - 规则原因 react以后会废弃掉 findDOMNode方法 [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md) **[⬆ 回到目录](#目录)** ## react/no-danger-with-children - 规则含义禁止使用dangerouslySetInnerHTML的同时还包含children - 规则原因错误语法 - 错误例子

Children

- 正确例子

Children

[eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-danger-with-children.md) **[⬆ 回到目录](#目录)** ## react/no-unused-prop-types - 规则含义不要定义使用不到的 prop types - 规则原因代码越少越好,代码越多,问题越多 - 错误例子 class Hello extends React.PureComponent{ static propTypes= { name: PropTypes.string } render() { return

Hello Bob

; } }; - 正确例子 class Hello extends React.PureComponent{ static propTypes= { name: PropTypes.string } render() { return

Hello {this.props.name}

; } }; [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md) **[⬆ 回到目录](#目录)** ## react/style-prop-object - 规则含义强制要求style属性的值必须是对象 - 规则原因错误语法 (This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.) - 错误例子

- 正确例子

[eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md) **[⬆ 回到目录](#目录)** ## react/no-unescaped-entities - 规则含义禁止在jsx文本节点中出现没有转义字符： > " ' } - 规则原因这几个字符出现了也没事,react会自动转义.但是大概率这几种字符的出现是由于敲错了,比如： ``` c="d"> >bodytext ``` 因为多敲了一个>,输出错误.这个规则就是让你及早发现错误如果你需要用到这几个字符,使用转义符号或者通过{}输出： ``` > -> > " -> " ' -> ' } -> } ``` - 错误例子

- 正确例子

{'>'}

[eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md) **[⬆ 回到目录](#目录)** ## react/no-children-prop - 规则含义禁止使用props的children属性传递子元素 - 规则原因放到jsx语法里更好理解 - 错误例子 } /> - 正确例子 [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md) **[⬆ 回到目录](#目录)** ## react/no-array-index-key - 规则含义禁止使用索引作为属性key的值 - 规则原因 key能告诉react,哪些元素是不变的,哪些元素是变了的从而重新渲染如果使用索引作为key,不能唯一标识元素,有可能的后果就是,内容变了,但是没有重新刷新使用元素内容唯一标识 - 错误例子 {list.map((item, index) =>

{item}

)} - 正确例子 {list.map((item, index) =>

{item}

)} [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md) **[⬆ 回到目录](#目录)** ## react/require-default-props - 规则含义强制要求每个非必需props都有一个对应的defaultProps - 规则原因组件可以看成和js的函数一样的东西,输入就是props,输出就是elements 一个好的函数应该对每个输入值进行类型检查并设置默认值,运行时候保证各种边界条件可以运行良好. 给所有props设置默认值,也能保证props缺失时组件能正常渲染. [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md) **[⬆ 回到目录](#目录)** ## react/forbid-foreign-prop-types - 规则含义禁止直接引用别的组件的proptypes(可以通过import解构重命名使用) - 规则原因防止生产环境下使用babel插件 babel-plugin-transform-react-remove-prop-types 去除propTypes时出现问题 - 错误例子 import SomeComponent from './SomeComponent'; SomeComponent.propTypes; const { propTypes } = SomeComponent; SomeComponent['propTypes']; - 正确例子 import SomeComponent, {propTypes as someComponentPropTypes} from './SomeComponent'; [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-foreign-prop-types.md) **[⬆ 回到目录](#目录)** ## react/default-props-match-prop-types - 规则含义必填(required)的props不允许出现在defaultProps中没有在propTypes中定义的属性不允许出现在defaultProps中 - 规则原因减少冗余 - 错误例子 MyStatelessComponent.propTypes = { foo: React.PropTypes.string.isRequired, bar: React.PropTypes.string }; MyStatelessComponent.defaultProps = { foo: "foo", baz: "baz" }; - 正确例子 MyStatelessComponent.propTypes = { foo: React.PropTypes.string.isRequired, bar: React.PropTypes.string }; MyStatelessComponent.defaultProps = { bar: "bar" }; [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/default-props-match-prop-types.md) **[⬆ 回到目录](#目录)** ## react/no-redundant-should-component-update - 规则含义 PureComponent类型的组件禁止使用shouldComponentUpdate方法 - 规则原因 PureComponent默认实现了一个shouldComponentUpdate方法(通过对state和props浅比较决定是否渲染). 再定义shouldComponentUpdate仍然会按照你定义的方法来决定是否渲染但这样使用PureComponent就没有意义了 [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-redundant-should-component-update.md) **[⬆ 回到目录](#目录)** ## react/no-unused-state - 规则含义禁止出现未被使用的state属性 - 规则原因减少冗余 [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unused-state.md) **[⬆ 回到目录](#目录)** ## react/boolean-prop-naming - 规则含义强制布尔值变量命名以is或has开始 - 规则原因统一规范,帮助理解变量含义 [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/boolean-prop-naming.md) **[⬆ 回到目录](#目录)** ## react/no-typos - 规则含义保证react预留的静态类属性和生命周期方法大小写拼写正确 - 规则原因 js属性大小写敏感,写错就不执行了 [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-typos.md) **[⬆ 回到目录](#目录)** ## react/jsx-curly-brace-presence - 规则含义不允许花括号给字符串属性或文本节点使用 - 规则原因减少冗余 - 错误例子 {"zcs"} - 正确例子 zcs [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md) **[⬆ 回到目录](#目录)** ## react/destructuring-assignment - 规则含义强制要求使用解构获取所有props,state,context属性,再通过变量在render中使用 - 规则原因 1. 减少this.props字符串的书写 2. 减少对this.props的索引搜索 - 错误例子 render() { } - 正确例子 render() { const {name, gender} = this.props; } [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md) **[⬆ 回到目录](#目录)** ## react/no-access-state-in-setstate - 规则含义 setState方法中禁止使用this.state - 规则原因 setState中使用this.state都是为了获取上一次的状态,进行下一次的操作. 但setState有可能是异步的,批量的,因此使用this.state不能准确获取上一次的状态数据你可以： 1. 要不使用回调函数获取修改后的state 2. 要不通过第一个函数参数获取上一次state - 错误例子 onClick() { this.setState({ num: this.state.num + 1, }) } - 正确例子 onClick() { this.setState(prevState => { return { num: prevState.num + 1 } }) } onClick() { this.setState(xx, () => { ... }) } [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-access-state-in-setstate.md) **[⬆ 回到目录](#目录)** ## react/button-has-type - 规则含义 button标签必须设置type属性(button, submit, reset) - 规则原因 button的type属性默认值是submit,可能会导致意外现象 - 错误例子 - 正确例子 [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/button-has-type.md) **[⬆ 回到目录](#目录)** ## react/no-this-in-sfc - 规则含义禁止在sfc中出现this指针 - 规则原因 sfc==stateless function component===无状态组件===函数组件这种组件的this和class组件的不同 - 错误例子 function Foo(props) { return (

{this.props.bar}

); } - 正确例子 function Foo(props) { return (

{props.bar}

); } [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-this-in-sfc.md) **[⬆ 回到目录](#目录)** ## react/no-unsafe - 规则含义禁止使用不安全的生命周期方法(componentWillMount,componentWillUpdate,componentWillReceiveProps) - 规则原因 1. 这些方法将在react17正式不支持. 2. 这些方法本身就有潜在的问题. * componentWillMount和 componentWillUpdate都是render前要调用的方法,不能调用setState容易出错 * componentWillReceiveProps有以下问题： 1. 你不能直接把props的值一股脑的设置给state,因为这样会把用户原生操作的状态冲掉 2. 当接收新props时,你需要对内容进行判断,决定更新哪个状态.这是很复杂的,随着props的增多很难维护.而且难以把状态复原 3. state的来源包括mount时候constructor中的props和 componentWillReceiveProps中的判断设置,来源不单一,你可能要写两种情况的代码 * 解决方法是： 1. 尽量不设置state,所有组件只是用props,state统一管理(redux的做法) 2. 使用key关联id,当一个组件的key换了,从新mount,避开 componentWillReceiveProps 方法 (这些方法在组价的异步渲染和严格模式下会有问题) [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unsafe.md) **[⬆ 回到目录](#目录)** ## react/jsx-handler-names - 规则含义强制要求jsx中onXXX(事件处理函数)的对应类的方法前缀必须是handle - 规则原因统一规范,增强可读性 - 错误例子 - 正确例子 [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md) **[⬆ 回到目录](#目录)** ## react/jsx-fragments - 规则含义强制fragment语法使用简写<> - 规则原因统一规范,减少冗余 - 错误例子 - 正确例子 <> [eslint](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-fragments.md) **[⬆ 回到目录](#目录)**