javascript - 未捕获的不变违规 : addComponentAsRefTo(. ..):只有 ReactOwner 才能拥有引用

标签 javascript reactjs ecmascript-6

我正在尝试使用react-data-grid ( http://adazzle.github.io/react-data-grid/index.html ),但我不断收到错误:

invariant.js:17 Uncaught Invariant Violation: 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.

我尝试卸载该软件包并重新安装,但没有成功。

这是我的代码:

render() {
    ...
    var _rows = [];
        for (var i = 1; i < 1000; i++) {
            _rows.push({
                id: i,
                title: 'Title ' + i,
                count: i * 1000
            });
        }

        var rowGetter = function(i){
            return _rows[i];
        };

        const columns = [
            {
                key: 'id',
                name: 'ID'
            },
            {
                key: 'title',
                name: 'Title'
            },
            {
                key: 'count',
                name: 'Count'
            }
        ]
   return (
        ...
<ReactDataGrid
                                columns={columns}
                                rowGetter={rowGetter}
                                rowsCount={_rows.length}
                                minHeight={277} />
...
   )
}

我该如何解决这个问题?

<小时/>

我改变了我的 config.js:

...
"npm:react-data-grid@0.14.42": {
      "classnames": "npm:classnames@1.2.2",
      "es5-shim": "npm:es5-shim@4.5.8",
      "fbjs": "npm:fbjs@0.6.1",
      "object-assign": "npm:object-assign@2.1.1",
      "process": "github:jspm/nodelibs-process@0.1.2",
      //"react": "npm:react@0.14.8",
      "react-contextmenu": "npm:react-contextmenu@1.5.0",
      //"react-dom": "npm:react-dom@0.14.8",
      "ron-react-autocomplete": "npm:ron-react-autocomplete@3.0.1"
    },
...

现在它可以工作了。

最佳答案

or you have multiple copies of React loaded.

每次我收到这个错误都是因为我加载了两次 React,请确保只加载 React 一次,特别是如果你使用的是 webpack

关于javascript - 未捕获的不变违规 : addComponentAsRefTo(. ..):只有 ReactOwner 才能拥有引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37539190/

相关文章:

javascript - navigator.geolocation.getCurrentPosition/watchPosition 在 android 6.0 中不工作

javascript - React DevTools 将组件显示为 "Loading..."

android - Expo Developer Tools 与 Expo CLI 断开连接

javascript - 在 Javascript 中使用 strict 和 let 不按预期工作

javascript - 如何从 ES6 转换为 ES5(箭头函数)

javascript - 为什么 fetch 返回 302 状态码而 XHR 没有?

javascript - Javascript 中的弹性列表

javascript - 如何删除数组中对象的重复值?

javascript - Vue3 : how to avoid Vitejs to erase/replace all DOM content when mounting the app?

javascript - 为什么这个react/javascript "removeEventListener"不删除监听器?