2016-11-23 128 views
1

当我有这样定义一个简单的组件:addComponentAsRefTo(...):只有ReactOwner可以参[...]点击菜单项一

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" 
    } 
} 

是否有反应或与材料的UI做什么?问题的解决方法是什么?

+0

https://github.com/JedWatson/react-select/issues/606也许这会有所帮助。 –

+0

你在应用程序的某处调用injectTapEventPlugin()函数吗? –

回答

1

我发现了这个问题。

似乎出于某种原因,我在index.html(来自node_modules)中包括React和ReactDOM,但也将其作为依赖项包含在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" 

} 
2

问题的解决方法是什么?

其中一个react-包取决于直接的反应,从而把自己的react版本造成两人反应得到加载版本。在node_modules及其子文件夹

修复

查找一个文件夹react确定包惹的祸。

+0

'npm ls react'给了我' - react @ 15.4.1',所以我不认为没有多个React版本就有问题...... –