Javascript Reactjs UI库在客户端向（…）抛出错误AddComponentAsRef

有人能找出为什么reactjs无法将侦听器连接到客户端的

Grommet

UI组件吗？我首先在服务器端呈现组件：

import React from 'react';
import Tabs from 'grommet/components/Tabs';
import Tab from 'grommet/components/Tab';

export default class ItemPage extends React.Component {
    render(){
        return <div id="app">
            <div onClick={this.clickHandler}>Something@@@@@@@</div>
            <Tabs>
                <Tab title="First Title">
                    <h3>First Tab</h3>
                    <p>Contents of the first tab !</p>
                </Tab>
                <Tab title="Second Title">
                    <h3>Second Tab</h3>
                    <p>Contents of the second tab</p>
                </Tab>
                <Tab title="Third Title">
                    <h3>Third Tab</h3>
                    <p>Contents of the third tab</p>
                </Tab>
            </Tabs>
            </div>
    }
    clickHandler(){
        console.log("here!!!!!");
    }
}

module.exports = ItemPage;

第一个div标签上的click函数

Something@@@@

起作用，但是

根本不起作用。每个

上的单击功能都不会触发，并且没有应用任何样式，只有纯html：

这里有一个错误：

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 

有人说这是因为React模块加载了两次，我怀疑这是由于Grommet UI库，因为删除所有

组件后错误消失了。有人能告诉我如何解决这个问题吗

其他一些参考资料：

npm ls | grep react
├─┬ babel-preset-react@6.11.1
│ ├── babel-plugin-transform-react-display-name@6.8.0
│ ├─┬ babel-plugin-transform-react-jsx@6.8.0
│ │ └── babel-helper-builder-react-jsx@6.9.0
│ ├── babel-plugin-transform-react-jsx-self@6.11.0
│ └── babel-plugin-transform-react-jsx-source@6.9.0
│ ├─┬ react@15.2.1
│ ├── react-dom@15.2.1
│ ├─┬ react-gravatar@2.4.4
│ ├─┬ react-intl@2.1.3
├── react@0.14.8 extraneous
├── react-dom@0.14.8 extraneous
├── react-hot-loader@1.3.0 extraneous
├─┬ react-redux@4.4.5
│ ├── hoist-non-react-statics@1.2.0




  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-minify": "^0.1.12",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-member-expression-literals": "^6.8.0",
    "babel-plugin-transform-merge-sibling-variables": "^6.8.0",
    "babel-plugin-transform-minify-booleans": "^6.8.0",
    "babel-plugin-transform-property-literals": "^6.8.0",
    "babel-plugin-transform-simplify-comparison-operators": "^6.8.0",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "babelify": "^7.3.0",
    "bluebird": "*",
    "body-parser": "1.10.0",
    .......
  },
  "dependencies": {
    "browserify": "^13.0.1",
    "connect-redis": "^3.1.0",
    "express-session": "^1.14.0",
    "grommet": "^0.6.9",
    "node-uuid": "^1.4.7",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "request": "^2.53.0",
    "webpack-merge": "^0.14.0"
  }

---

codepen上的grommet示例也包含reactjs，所以我认为它在您的示例中不会包含两次@Rikin，这是github页面，这是我的[bundle.js]（）@Rikin，我刚刚尝试了其他UI库，比如react bootstrap。呈现服务器端，在客户端它抛出相同的错误。codepen上可能重复的grommet示例也包含reactjs，因此我认为在您的示例中不会包含两次@Rikin，这是github页面，这是我的[bundle.js]（）@Rikin，我刚刚尝试了其他UI库，比如react bootstrap。在服务器端渲染，在客户端它抛出相同的错误

npm ls | grep react
├─┬ babel-preset-react@6.11.1
│ ├── babel-plugin-transform-react-display-name@6.8.0
│ ├─┬ babel-plugin-transform-react-jsx@6.8.0
│ │ └── babel-helper-builder-react-jsx@6.9.0
│ ├── babel-plugin-transform-react-jsx-self@6.11.0
│ └── babel-plugin-transform-react-jsx-source@6.9.0
│ ├─┬ react@15.2.1
│ ├── react-dom@15.2.1
│ ├─┬ react-gravatar@2.4.4
│ ├─┬ react-intl@2.1.3
├── react@0.14.8 extraneous
├── react-dom@0.14.8 extraneous
├── react-hot-loader@1.3.0 extraneous
├─┬ react-redux@4.4.5
│ ├── hoist-non-react-statics@1.2.0




  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-minify": "^0.1.12",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-member-expression-literals": "^6.8.0",
    "babel-plugin-transform-merge-sibling-variables": "^6.8.0",
    "babel-plugin-transform-minify-booleans": "^6.8.0",
    "babel-plugin-transform-property-literals": "^6.8.0",
    "babel-plugin-transform-simplify-comparison-operators": "^6.8.0",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "babelify": "^7.3.0",
    "bluebird": "*",
    "body-parser": "1.10.0",
    .......
  },
  "dependencies": {
    "browserify": "^13.0.1",
    "connect-redis": "^3.1.0",
    "express-session": "^1.14.0",
    "grommet": "^0.6.9",
    "node-uuid": "^1.4.7",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "request": "^2.53.0",
    "webpack-merge": "^0.14.0"
  }