使用 react-css-modules 时出现大写构造函数名称错误答案

【问题标题】：uppercase constructor name error when using react-css-modules使用 react-css-modules 时出现大写构造函数名称错误
【发布时间】：2016-10-10 04:33:15
【问题描述】：

我已将react-css-modules 集成到https://github.com/mxstbr/react-boilerplate 中，并像这样使用它：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './styles.css';

class Header extends React.Component {
  render() {
    return (
      <header styleName="app__header">
        // more content
      </header>
    );
  }
}

export default CSSModules(Header, styles); <--- error

但是，JSLint 给了我一个错误：

error  A function with a name starting with an uppercase letter should only be used as a constructor  new-cap

我该如何解决这个问题？我编写 JavaScript 的方式与 react-css-modules 文档所说的相同。错误似乎是 Header 不应该有大写字母，但按照惯例我知道类应该。

作为额外的奖励，如果我可以简单地导出 Header 而不将其包装在 CSSModules(Header, styles); 中，那就太好了（例如 export default Header extends Component {}），但是文档没有提到这一点，所以不确定它是否可能。

【问题讨论】：

标签： javascript reactjs react-css-modules

【解决方案1】：

您收到此错误是由于您的 JSLint 配置明确禁止这种类型的命名格式。在此处查找更多信息：https://jslinterrors.com/a-constructor-name-should-start-with-an-uppercase-letter

可能值得考虑更改此规则，因为在 React 中您经常使用高阶组件，例如您正在使用的组件通常以大写格式命名。

如果您不想更改规则，您当然可以根据需要重命名导入。示例：

import cssModules from 'react-css-modules';

...

export default cssModules(Header, styles);

这可行，但你必须为你的团队决定约定。

【讨论】：