React16.1引入antd的Menu组件报错

Question

package.json：

 "dependencies": {
    "antd": "^2.13.9",
    "fetch": "^1.1.0",
    "react": "^16.1.0",
    "react-dom": "^16.1.0",
    "react-responsive": "^3.0.0",
    "react-router": "^4.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-import": "^1.6.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^8.0.0",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.6.0",
    "react-transform-hmr": "^1.0.4",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }

render函数：

export default class PCHeader extends React.Component{
    constructor(){
        super();
    }

    render(){
        return(
            <header>
                <Row>
                    <Col span={2}></Col>
                    <Col span={6}>
                        <a href="/" class={styles.logo}>
                            <img src={logo} alt="logo"/>
                            <span>ReactNews</span>
                        </a>
                    </Col>
                    <Col span={14}>
                        <Menu mode="horizontal">
                            <Menu.Item key="mail">
                                <Icon type="mail" />Navigation One
                            </Menu.Item>
                            <Menu.Item>
                                <Icon type="appstore" />Navigation One
                            </Menu.Item>
                            <Menu.Item>
                                <Icon type="area-chart" />Navigation One
                            </Menu.Item>
                            <Menu.Item>
                                <Icon type="cloud" />Navigation One
                            </Menu.Item>
                            <Menu.Item>
                                <Icon type="smile" />Navigation One
                            </Menu.Item>
                        </Menu>
                    </Col>
                    <Col span={2}></Col>
                </Row>
            </header>
        )
    }
}

报错：

Answer 1

这个应该是你用法的问题，antd官方虽然没说明但是给的Demo已经很明确了，就是你在使用Menu这种拥有子选项的组件时，需要在引用完之后将子组件定义出来。也就是<Menu.Item />替换为<Item>如下：

import { Menu } from 'antd';
const { Item } = Menu;// 或者 const Item = Menu.Item;
...
// 使用的时候
<Item>即可

Answer 2

按你说的改了也不行。报错字面意思就是加载了两次react，参考https://fb.me/react-refs-must...，还是没解决。

Answer 3

//这是我的webpack的js的配置，
{ //引入babel模块处理ES6代码

            test: /(\.jsx|\.js)$/,
            exclude: EXCLUDE,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        'babel-polyfill',
                        'es2015',
                        'react',
                        'stage-0'
                    ],
                    plugins: [
                        //babel-plugin-import
                        ['import', {
                            libraryName: 'antd',
                            style: "css"
                        }]
                    ]
                }
            }]
        },

// 这是.bablerc的配置
{

"presets": [
     "babel-polyfill",
     "react",
     "stage-0",
     "es2015"
],
"plugins": [
    ["import", {
        libraryName: "antd",
        style: "css"
    }],
]

}
你看看有没有漏掉的，我的能用

Answer 4

这是由于react16升级引发的问题，antdesign还没有支持到这个高版本，要想解决这个问题可以把react、react-dom降级到15.6.2，然后删除掉所有的包，重新install，不会再出现该报错信息

Answer 5

antd前几天已经发布3.0.0了
更新日志里说是修复了menu的bug

可以升级一下antd试试