Javascript 反应和材质UI:未捕获不变冲突：removeComponentAsRefFrom（…）

我使用Material UI开发React组件：

这很好用

MainView.js

import React，{Component}来自'React'；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“物料ui/List”导入{List，ListItem}；
类MainView扩展组件{
render（）{
返回(
);
}
}
导出默认主视图；

但是当我将

移动到另一个组件时

MainView.js

import React，{Component}来自'React'；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“/MyListView”导入MyListView；
//此导入在移动到MyListView时被删除为未使用：
//从“物料ui/List”导入{List，ListItem}；
类MainView扩展组件{
render（）{
返回(
);
}
}

MyListView.js

import React，{Component}来自'React'；
从“物料ui/List”导入{List，ListItem}；
类MyListView扩展组件{
render（）{
返回(
);
}
}
导出默认MyListView；

在这种情况下，我会收到以下信息：

未捕获不变冲突：removeComponentAsRefFrom（…）：仅一个 所有者可以有引用。您可能正在删除对组件的引用 不是在组件的“render”方法中创建的，或者 已加载React的多个副本（详细信息：链接）

main.js

ReactDOM.render((
)，document.getElementById（'root'）；

---

有什么建议可以避免这种情况吗？谢谢大家!

如果我在渲染方法中添加了一个组件，该组件要么拼写错误，要么未导入，因此未在当前范围中定义，则会出现此错误

如果观看浏览器控制台，我将看到：

[HMR] Cannot apply update. Need to do a full reload!
app.js:90432 [HMR] ReferenceError: NewComponent is not defined

但是，如果刷新页面，我会在浏览器和服务器日志中看到：

Invariant Violation: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https:// fb.me/react-refs-must-have-owner).
   at invariant (E:\testing\node-seed\tmp\webpack:\~\fbjs\lib\invariant.js:38:1)

---

在这种情况下，修复或导入组件名称可以解决此错误。

能否在

MainView.js

中显示所有

import

语句？

import React, { Component } from 'react';
import { List, ListItem } from 'material-ui/List';

class MyListView extends Component {

  render() {
    return (
      <List>
        <ListItem primaryText="item 1" />
        <ListItem primaryText="item 2" />
        <ListItem primaryText="item 3" />
      </List>
    );
  }
}

export default MyListView;

ReactDOM.render((
  <Provider store={store}>
    <Router history={hashHistory}>
      <Route path="/" component={App} />
      <Route path="/test" component={MainView} />
    </Router>
  </Provider>
), document.getElementById('root'));

[HMR] Cannot apply update. Need to do a full reload!
app.js:90432 [HMR] ReferenceError: NewComponent is not defined

Invariant Violation: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https:// fb.me/react-refs-must-have-owner).
   at invariant (E:\testing\node-seed\tmp\webpack:\~\fbjs\lib\invariant.js:38:1)