addComponentAsRefTo(...): 只有 ReactOwner 在点击 MenuItem 时可以有 refs[...]

Question

我有一个简单的组件，其定义如下：

class App extends React.Component<{}, {}> {

constructor() {
    super();
}

render() {
    return (
        <MuiThemeProvider muiTheme={muiTheme}>
            <div>
                <Drawer open={true}>
                    <MenuItem primaryText="123" />
                </Drawer>

            </div>
        </MuiThemeProvider>
        );
    }
}

当我点击 MenuItem 时，出现这两个错误，菜单项的背景变成灰色。

Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: react-refs-must-have-owner).  react-dom.js:17870:15
invariant http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:17870:15
[70]</ReactOwner.addComponentAsRefTo http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:10739:61
attachRef http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:11677:5
[76]</ReactRef.attachRefs http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:11696:5
attachRefs http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:11509:3
notifyAll http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:948:9
[74]</ON_DOM_READY_QUEUEING.close http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:11388:5
[100]</TransactionImpl.closeAll http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:14780:11
[100]</TransactionImpl.perform http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:14727:11
[100]</TransactionImpl.perform http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:14714:13
[82]</<.perform http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:12834:12
[82]</flushBatchedUpdates http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:12917:7
bound  self-hosted
[100]</TransactionImpl.closeAll http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:14780:11
[100]</TransactionImpl.perform http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:14727:11
[51]</ReactDefaultBatchingStrategy.batchedUpdates http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:8787:14
batchedUpdates http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:12842:10
[57]</ReactEventListener.dispatchEvent http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:9186:7
bound  self-hosted

TypeError: component is undefined[Learn More]  bundle.js:18926:1
    ReactTransitionGroup/_this.performLeave http://192.168.0.102:8080/dist/bundle.js:18926:1
    forEach self-hosted
    componentDidUpdate http://192.168.0.102:8080/dist/bundle.js:19017:6
    bind_applyFunctionN self-hosted
    bound componentDidUpdate self-hosted
    measureLifeCyclePerf http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:4541:12
    [30]</ReactCompositeComponent._performComponentUpdate/< http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:5195:11
    notifyAll http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:948:9
    [74]</ON_DOM_READY_QUEUEING.close http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:11388:5
    [100]</TransactionImpl.closeAll http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:14780:11
    [100]</TransactionImpl.perform http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:14727:11
    [100]</TransactionImpl.perform http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:14714:13
    [82]</<.perform http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:12834:12
    [82]</flushBatchedUpdates http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:12917:7
    bound  self-hosted
    [100]</TransactionImpl.closeAll http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:14780:11
    [100]</TransactionImpl.perform http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:14727:11
    [51]</ReactDefaultBatchingStrategy.batchedUpdates http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:8787:14
    batchedUpdates http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:12842:10
    [57]</ReactEventListener.dispatchEvent http://192.168.0.102:8080/node_modules/react-dom/dist/react-dom.js:9186:7
    bound

这是package.json:

{
  "name": "asd",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/moment": "^2.13.0",
    "@types/react-tap-event-plugin": "0.0.30",
    "material-ui": "^0.16.4",
    "moment": "^2.16.0",
    "react": "^15.4.0",
    "react-dom": "^15.4.0",
    "react-router": "^2.8.1",
    "react-sticky": "^5.0.5",
    "react-tap-event-plugin": "^2.0.1"
  },
  "devDependencies": {
    "express": "^4.14.0",
    "path": "^0.12.7",
    "source-map-loader": "^0.1.5",
    "svg-url-loader": "^1.1.0",
    "ts-loader": "^0.8.2",
    "url-loader": "^0.5.7"
  }
}

是否与 React 或 material-ui 有关？问题的解决方法是什么？

Answer 1

What is the fix to the problem?

其中一个 react- 包直接依赖于 React，因此带来了它们自己的 react 版本，导致加载了两个 React 版本。

修复

在 node_modules 及其子文件夹中查找文件夹 react 以确定问题包。

Answer 2

我找到问题了。

似乎出于某种原因，我将 React 和 ReactDOM 包含在 index.html 中（来自 node_modules），但也将其作为依赖项包含在 package.json 中。

  <script src="./node_modules/react/dist/react.js"></script>
  <script src="./node_modules/react-dom/dist/react-dom.js"></script>

我从 index.html 中删除了上面的两行，还从我的 webpack 配置文件中删除了这些行：

externals: {

"react": "React",

"react-dom": "ReactDOM"

}

addComponentAsRefTo(...): 只有 ReactOwner 在点击 MenuItem 时可以有 refs[...]

addComponentAsRefTo(...): Only a ReactOwner can have refs[...] when clicking on a MenuItem

typescript

reactjs

material-ui

修复