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

Question

我已经将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

我该如何解决这个问题？我已经按照react-css-modules文档所说的方式编写了JavaScript。错误似乎是Header不应该有大写字母，但从约定中我知道classes应该有大写字母。

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

Answer 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);

这是可行的，但您必须决定您的团队的约定。