鍍金池/ 問答/HTML/ React16.1引入antd的Menu組件報錯

React16.1引入antd的Menu組件報錯

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函數(shù)：

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

報錯：

clipboard.png

回答
編輯回答
離魂曲

//這是我的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"
    }],
]

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

2018年8月8日 00:32
編輯回答
法克魷

antd前幾天已經(jīng)發(fā)布3.0.0了
更新日志里說是修復(fù)了menu的bug
clipboard.png
可以升級一下antd試試

2017年9月25日 12:12
編輯回答
伐木累

按你說的改了也不行。報錯字面意思就是加載了兩次react，參考https://fb.me/react-refs-must...，還是沒解決。

2017年2月5日 14:48
編輯回答
小曖昧

這個應(yīng)該是你用法的問題，antd官方雖然沒說明但是給的Demo已經(jīng)很明確了，就是你在使用Menu這種擁有子選項(xiàng)的組件時，需要在引用完之后將子組件定義出來。也就是<Menu.Item />替換為<Item>如下：

import { Menu } from 'antd';
const { Item } = Menu;// 或者 const Item = Menu.Item;
...
// 使用的時候
<Item>即可
2017年12月4日 11:25
編輯回答
傻叼

這是由于react16升級引發(fā)的問題，antdesign還沒有支持到這個高版本，要想解決這個問題可以把react、react-dom降級到15.6.2，然后刪除掉所有的包，重新install，不會再出現(xiàn)該報錯信息

2018年5月12日 07:45