使用Airbnb规范lint React应用时，children prop-types报错求助

嘿，我一眼就揪出问题所在了！你碰到的ESLint错误，核心原因是propTypes的赋值方式写错了，还有几处不符合Airbnb规范的小细节，我帮你一步步修正：

错误根源分析 #

你现在把propTypes赋值给了组件的prototype属性：

RootPage.prototype={ children: PropTypes.node }

但React组件的propTypes应该挂载在组件类的propTypes静态属性上，而非prototype。另外代码里引号风格不统一（Airbnb规范要求JavaScript代码用单引号），这也可能触发ESLint警告。

修正后的规范代码 #

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class RootPage extends Component {
  static propTypes = {
    children: PropTypes.node,
  };

  render() {
    return <div>{this.props.children}</div>;
  }
}

关键修正点 #

• propTypes的正确挂载：用ES6静态类属性static propTypes定义，这是React官方推荐写法，完全契合Airbnb规范
• 统一引号风格：把JavaScript代码里的双引号改成单引号（JSX标签属性依然用双引号，这里暂未涉及）
• 补充分号：Airbnb规范要求语句末尾必须加分号，你之前的代码有几处遗漏

兼容旧版ES6的替代写法 #

如果你的项目暂不支持静态类属性，也可以用下面的写法，同样符合规范：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class RootPage extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}

RootPage.propTypes = {
  children: PropTypes.node,
};

这样修改后，ESLint针对this.props.children的错误就会消失，这个模板也可以放心用来编写后续组件啦！

内容的提问来源于stack exchange，提问作者spidy