Question

我使用Material-UI开发React组件：

这很好用

MainView.js

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

class MainView extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <List>
          <ListItem primaryText="item 1" />
          <ListItem primaryText="item 2" />
          <ListItem primaryText="item 3" />
        </List>
      </MuiThemeProvider>
    );
  }
}

export default MainView;

但是当我将<List>移到另一个组件

时

MainView.js

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyListView from './MyListView';
// this import was removed as unused as <List> moved to MyListView:
// import { List, ListItem } from 'material-ui/List';

class MainView extends Component {

  render() {
    return (
      <MuiThemeProvider>
        <MyListView />
      </MuiThemeProvider>
    );
  }
}

MyListView.js

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;

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

未捕获的不变违规：removeComponentAsRefFrom（...）：仅限a ReactOwner可以有refs。您可能正在删除组件的引用这不是在组件的`render`方法中创建的，或者是你已加载多个React副本（详细信息：链接）。

main.js

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

有什么建议可以逃避这个吗？谢谢！

Answer 1

如果我将一个组件添加到拼写错误或未导入的渲染方法中，我会看到此错误 - 因此未在当前范围中定义。

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

[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)

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

React和Material-UI：未捕获的不变违规：removeComponentAsRefFrom（...）

1 个答案: