Обновлен до React v16, смотри Ошибка: parentComponent должен быть допустимым компонентом React
Я добавил новый компонент в свой проект с помощью частного пакета NPM. Он имеет следующие зависимости, как указано в моем проекте system.config.js
:
"npm:dialog@0.6.4": {
"material-ui": "npm:material-ui@0.19.4",
"prop-types": "npm:prop-types@15.6.0",
"react": "npm:react@16.2.0",
"whatwg-fetch": "npm:whatwg-fetch@1.1.1"
}
Когда я запускаю свое приложение, я вижу следующую ошибку консоли:
invariant.js:21 Uncaught (in promise) Error: parentComponent must be a valid React Component
at invariant (invariant.js:21)
at unstable_renderSubtreeIntoContainer (react-dom.development.js:11680)
at RenderToLayer.renderLayer (RenderToLayer.js:119)
at RenderToLayer.componentDidMount (RenderToLayer.js:56)
at eval (ReactCompositeComponent.js:149)
at measureLifeCyclePerf (ReactCompositeComponent.js:52)
at eval (ReactCompositeComponent.js:148)
at CallbackQueue.notifyAll (CallbackQueue.js:34)
at ReactReconcileTransaction.close (ReactReconcileTransaction.js:31)
at ReactReconcileTransaction.closeAll (Transaction.js:73)
at ReactReconcileTransaction.perform (Transaction.js:39)
at ReactUpdatesFlushTransaction.perform (Transaction.js:30)
at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:60)
at Object.flushBatchedUpdates (ReactUpdates.js:104)
at ReactDefaultBatchingStrategyTransaction.closeAll (Transaction.js:73)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:39)
Некоторое гугление заставляет меня поверить, что тот факт, что в проекте установлено несколько версий реагирования, может быть причиной ошибки. Мои зависимости зависят от нескольких версий реакции, а именно: v0.14.9, v15.4.2, v16.2.0 (которая добавлена здесь в соответствии с требованиями этого нового компонента) и v16.3.2. у меня тоже есть react-dom
v15.4.2 и v16.3.2 установлены. Дан Абрамов писал здесь, что есть проблемы с несколькими версиями реакции, пытающимися сосуществовать в одном проекте. Учитывая, что мой проект теперь содержит версию реакции выше 16.0.0, я выполнил команду:
jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>
Эта команда рекомендуется React при переходе на v16+
Часть моего render()
Функция, которая содержит этот ломающий компонент, выглядит следующим образом:
{this._showDialog() &&
selectedItems.length > 0 && (
<Dialog
acm={
selectedItems.length === 1
? cachedObjects[selectedItems[0]].access
: {}
}
onSelect={(access) => {
this._onAccessSave(access)
}}
onCancel={()=>{}}
serviceBaseEndpoint={serviceEndpoint}
open={openAccess}
userObject={Auth.fetchUserIfNeeded(true)
.then(user => {
return user})
}
>
<a
id="access-button"
onClick={this._onAccessClick}
title="Set Access"
{...this._getViewState(_thingSelected)}
>
<img src="icons/padlock.svg" />
</a>
</Dialog>
)}
Как я могу устранить ошибку консоли? Я должен представить, что эта проблема связана с реагирующими версиями и конфигурацией моего приложения. Мои зависимости, основанные на этих более старых версиях реакции, являются критически важными и не могут быть заменены. Они также в курсе, хотя они используют старые версии реакции. Это решаемая проблема, учитывая эту информацию?