Получение ошибки при рендеринге компонента, когда имя компонента изменяется на его статическое имя файла - PullRequest
Новая
       14

Получение ошибки при рендеринге компонента, когда имя компонента изменяется на его статическое имя файла

0 голосов
/ 25 марта 2019

Я пишу новый компонент на связанном модуле NPM, который вызывает компонент нормального класса. Когда я импортирую его в основной проект и отображаю его в браузере, страница разрывается, и веб-инспектор выдает «предупреждение».

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 Stucture: 

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

  public static props: Props = {...}

  public state = {...}

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

Структура родительского компонента: 

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, или проблема с машинописью, или проблема с реакцией. но я на самом деле не знаю, так как один только этот компонент работает, даже если он импортирован как обычный модуль.

Кроме того, для дальнейшего усложнения, ранее в этом файле я импортирую файл sass из того же каталога forked-module/src/, и он там не жалуется.

Это мой первый вопрос StackOverflow, поэтому любые отзывы о том, как писать лучшие вопросы в будущем, будут высоко оценены.

Любые комментарии, вопросы, комментарии, замечания или остроумные критические замечания приветствуются. Спасибо за вашу помощь.

...