Question

我正在链接NPM模块上编写一个新组件，该组件调用普通类组件。当我将其导入主项目并在浏览器中呈现时，页面中断，并出现Web检查器“警告”。

Warning: </static/media/LinkedComponent.17c39962.tsx /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

似乎在根据已编译的webpack-dev-server文件名编译其重命名组件声明时。

我正在这样导入组件：

import LinkedComponent from 'forked-module/src/LinkedComponent'

此组件与我的应用程序中的其他组件真正唯一不同的是它的复杂性和作为链接的模块。我需要派生一个现有模块来添加其他功能，并且之前没有链接过该模块。

我尝试在下一行重命名导入： const RenamedComponent = LinkedComponent
取消链接模块，并将当前更改推送到仓库中，照常安装模块
注释掉整个链接的组件并导出一个简单的组件

不幸的是，没有一个人能够修复它。

LinkedComponent结构：

export default class LinkedComponent extends React.PureComponent<IProps, IState> {

  public static props: Props = {...}

  public state = {...}

  public render() {
    return (
      {...}
    )
  }
}

ParentComponent结构：

import LinkedComponent from 'forked-module/src/LinkedComponent'

...

export default class ParentComponent extends React.Component<IProps,IState> {
  public render() {
    return (
      <>
        {...}
        <div>
          {(/* Comparison */) ?
            <LinkedComponent/> : null
          }
        </div>
      </>
    )
  }
}

我从未见过这样的问题，而我的一部分则感觉像是Webpack问题，打字稿问题或反应问题。但是我真的不知道，因为即使这个组件作为普通模块导入，它本身也能正常工作。

此外，要使其更加复杂，我在文件的较早位置从相同的forked-module/src/目录导入了一个sass文件，并且在该目录中没有抱怨。

这是我的第一个StackOverflow问题，因此，对于将来如何编写更好的问题的任何建议，我们深表感谢。

任何输入，问题，评论，疑虑或机智的批评都值得赞赏。谢谢您的帮助。

渲染组件时将组件名称更改为其静态文件名时出现错误

0 个答案: