Question

我通过私有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-dom v15.4.2和v16.3.2。 Dan Abramov wrote here多个版本的反应试图在同一个项目中共存存在问题。鉴于我的项目现在包含一个高于16.0.0的反应版本，我运行了命令：

jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>

This command is recommended by React when making the jump to 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 v16，看到错误：parentComponent必须是有效的React组件

0 个答案: