修复

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或材料-ui有关？问题的解决方法是什么？

Answer 1

问题的解决方法是什么？

其中一个react-软件包依赖直接进行响应，从而带来自己的react版本，导致两个反应版本被加载。

修复

在react及其子文件夹中查找文件夹node_modules以确定要归咎的软件包。

Answer 2

我找到了这个问题。

由于某种原因，我似乎在index.html中包含了React和ReactDOM（来自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（...）：当点击MenuItem时，只有ReactOwner可以有refs [...]

2 个答案:

修复