无法绘制MenuIcon组件

时间:2017-04-17 00:54:37

标签: javascript reactjs material-ui

我正在尝试在AppBar组件上构建IconMenu。我正在使用create-react-app构建项目。

我的代码看起来像是 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React from "react";
import "./App.css";
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import MenuItem from 'material-ui/MenuItem';
import IconMenu from 'material-ui/IconMenu/IconMenu';
import IconButton from 'material-ui/IconButton/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';

const AppMenu = () => {
    return (
        <IconMenu
            iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
            anchorOrigin={{horizontal: 'right', vertical: 'top'}}
            targetOrigin={{horizontal: 'right', vertical: 'top'}}>
            <MenuItem primaryText="Menus"/>
            <MenuItem primaryText="Summary"/>
        </IconMenu>
    );
};

const App = () => (
    <MuiThemeProvider>
        <AppBar
            title="SpicyVeggie"
            showMenuIconButton={false}
            iconElementRight={<AppMenu />}
        />
    </MuiThemeProvider>
);

export default App;

我运行我的应用程序

$ yarn start
Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use yarn run build.

并且在控制台上看不到任何错误。在浏览器上,我看到了

enter image description here ub.com/facebookincubator/create-react-app

我看到warning,当我点击右边的MenuIcon时,没有任何反应,有人可以帮我理解我做错了吗?

该代码位于https://github.com/hhimanshu/spicyveggie/tree/menu

menu分支

提前致谢

1 个答案:

答案 0 :(得分:1)

我找到了答案,我需要react-tap-event-plugin才能使其正常工作

我做了以下

$ npm i --save react-tap-event-plugin

然后在index.js,我做了

// other imports
import injectTapEventPlugin from 'react-tap-event-plugin';
import App from './App'

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

ReactDOM.render(<App />, document.getElementById('root'));

就是这样!