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不应该有大写字母，但从惯例来看，我知道类应该。

作为一个额外的好处，如果我可以简单地导出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);

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

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

1 个答案: