使用 Material UI 时反应冲突答案

【问题标题】：React conflict when using Material UI使用 Material UI 时反应冲突
【发布时间】：2017-04-15 13:19:07
【问题描述】：

在 Material UI 0.16.6 版本中尝试使用 AppBar 时，出现以下错误

Uncaught 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.

这看起来像是一个反应冲突错误。

我的代码如下：

App.js

import React, { Component } from 'react';
import AppBar from 'material-ui/AppBar';
import {deepOrange500} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const muiTheme = getMuiTheme({
  palette: {
    accent1Color: deepOrange500,
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <AppBar/>
      </MuiThemeProvider>
    );
  }
}

export default App;

index.js

import injectTapEventPlugin from 'react-tap-event-plugin';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

有没有人遇到过这个问题，或者有谁知道如何解决这个问题？

【问题讨论】：

删除node modules文件夹并npm install，如果是lib冲突的问题，会得到解决。

标签： javascript reactjs npm material-ui

【解决方案1】：

在index.js 文件中，您将在ReactDOM.render 调用之前需要它：

// Needed for onTouchTap event handling
injectTapEventPlugin();

看看这是否能解决问题。如果没有，请尝试删除node_modules 文件夹并再次运行npm install。

【讨论】：