0

我通过私有 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)

一些谷歌搜索让我相信我在项目中安装了多个版本的反应这一事实可能会导致错误。我的依赖依赖于多个版本的 react，特别是：v0.14.9、v15.4.2、v16.2.0（这是根据这个新组件的要求在此处添加的版本）和 v16.3.2。我还安装了react-domv15.4.2 和 v16.3.2。Dan Abramov 在这里写道，多个版本的 react 试图在同一个项目中共存存在问题。鉴于我的项目现在包含高于 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>
              )}

如何消除控制台错误？我不得不想象这个问题与反应版本和我的应用程序配置有关。我依赖这些旧版本的 react 的依赖项是关键任务，无法替换。即使他们使用旧的 react 版本，它们也是最新的。鉴于此信息，这是一个可解决的问题吗？

4

0 回答 0