Reactjs UI库在客户端抛出错误addComponentAsRefTo（...）

Question

有没有人可以找出为什么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;

很好。在客户端，我有ReachDOM.render将事件绑定到react DOM：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

<script type="text/javascript" src="/js/build/ItemPage.js"></script>    
<script>
    var container = document.getElementById("app");
    var component = ItemPage;
    ReactDOM.render(React.createElement(component),container);
</script>

第一个div标记Something@@@@@@上的点击功能有效，但<Tabs>根本不起作用。每个<Tab>上的点击功能都不会触发，也没有应用任何样式，只需简单的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库，因为在删除所有<Tabs>组件后错误消失了。有谁能告诉我如何解决这个问题？

其他一些参考文献：

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"
  }