如何部署 AppBar Material UI？答案

【问题标题】：How can I deploy AppBar Material UI?如何部署 AppBar Material UI？
【发布时间】：2017-04-22 17:35:30
【问题描述】：

我是 React Material UI 的新手，我正在尝试部署 AppBar，但我不知道如何将子项包含到此 NavBar 中。当我单击左三行菜单时，我想部署 AppBar。我的 .jsx 是：

import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';

const STYLES = {
title: {
    cursor: 'pointer',
},
titleStyle: {
    textAlign: 'center'
},
buttonStyle: {
    backgroundColor: 'transparent',
    color: 'white'
}
};

const rightButtons = (
<div>
    <FlatButton label="About" style={STYLES.buttonStyle} />
    <FlatButton label="Home" style={STYLES.buttonStyle} />
</div>
);

export default class MenuAlumno extends React.Component {
constructor() {
    super();
    this.state = {
        abierto:false
    }
}

handleTouchTap = () => {
    //alert('Has clickado sobre el título');
    /*
    console.log(this.state.abierto)
    this.setState({
        abierto:true
    });
    */
    console.log(this.state.abierto)
    this.state.abierto = true;
    console.log(this.state.abierto)
}

render() {
    return (
        <AppBar
            title={<span style={STYLES.title}>- PLATAFORMA DE INCIDENCIAS -
</span>}
            onTitleTouchTap={this.handleTouchTap}
            titleStyle={STYLES.titleStyle}
            iconClassNameRight="muidocs-icon-navigation-expand-more"
            iconElementLeft={rightButtons}
        >
        </AppBar>
    );
}
}

但此代码替换了 FlatButtons 的左 3 行。当我单击 MenuButtonLeft 时，我希望使用包含我的网站（主页、关于我们、联系方式等）的页面部署一个侧边菜单。使用我之前放置的代码仅在工具栏中显示 MenuButtonLeft 和标题，但它不执行任何操作，它不会将任何带有 href 的菜单部署到我网站中的其他页面。

谢谢。

【问题讨论】：

你能详细说明一下，你想在这里实现什么
我想创建一个带有儿童的导航栏，而不仅仅是侧边栏
天哪，这个问题已经进入了正确的泡菜！标题给了它：这是两个问题，一个是[solved]，另一个是[edit]！不幸的是，这几乎不可读，而不是我们在这里使用的格式。如果您有一个新问题（或多个新问题，根据这种情况），请添加一个新问题。我已经把它回滚到第一个主要问题的最后一个已知的好版本。
下面的两个答案是什么？他们是针对第一个主要问题还是第二个主要问题？我想知道您现在是否最好再次向前滚动编辑（到第二个问题）并从根本上删除第一个问题，同时留下足够的上下文以使整个事情至少对新读者有所帮助。跨度>
不用说，请不要再这样做了 - 它会给志愿者带来编辑工作，我们已经有很多工作要做。

标签： reactjs ecmascript-6 material-ui

【解决方案1】：

使用以下代码。

import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';
import Drawer from 'material-ui/Drawer';

const STYLES = {
title: {
    cursor: 'pointer',
},
titleStyle: {
    textAlign: 'center'
},
buttonStyle: {
    backgroundColor: 'transparent',
    color: 'white'
}
};

const rightButtons = (
<div>
    <FlatButton label="About" style={STYLES.buttonStyle} />
    <FlatButton label="Home" style={STYLES.buttonStyle} />
</div>
);

export default class MenuAlumno extends React.Component {
constructor() {
    super();
    this.state = {
        abierto:false
    }
}

handleTouchTap = () => {
    //alert('Has clickado sobre el título');
    /*
    console.log(this.state.abierto)
    this.setState({
        abierto:true
    });
    */
    console.log(this.state.abierto)
    this.state.abierto = true;
    console.log(this.state.abierto)
}

render() {
    return (
<div>
        <AppBar
            title={<span style={STYLES.title}>- PLATAFORMA DE INCIDENCIAS -
</span>}
            onTitleTouchTap={this.handleTouchTap}
            titleStyle={STYLES.titleStyle}
            iconClassNameRight="muidocs-icon-navigation-expand-more"

        >
        </AppBar>
        <Drawer docked={false} width={200} open={this.state.abierto} >
        {rightButtons}
        </Drawer>
</div>
    );
}
}

【讨论】：

否，但 AppBar 未部署在 Drawer 中显示 MenuItem。
不要更新你的问题，而是回答你自己的问题

【解决方案2】：

我解决了上面的问题！这是解决方案：

import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
/*
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';
*/

const STYLES = {
title: {
    cursor: 'pointer'
},
titleStyle: {
    textAlign: 'center'
},
displayMenuTrue: {
    position: 'relative'
},
displayMenuFalse: { 
    display: 'none'
},
contentStyle: {
    transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)',
    marginLeft: '0px',
    top: '0px'
},
contentStyleActive: {
    marginLeft: '256px',
    position: 'relative',
    top: '-144px'
}
};

export default class MenuAlumno extends React.Component {
constructor() {
    super();
    this.state = {
        drawerOpen:false
    }
}

handleTouchTap = () => {
    //alert('Has clickado sobre el título');
    /*
    console.log(this.state.abierto)
    this.setState({
        abierto:true
    });
    */

    console.log(this.state.drawerOpen)
    this.state.drawerOpen = true;
    console.log(this.state.drawerOpen)

}

controlMenu = () => {
    if (this.state.drawerOpen) {
        console.log(this.state.drawerOpen)
        this.setState({ 
            drawerOpen: false 
        });

        $('.contenedor').css(STYLES.contentStyle);
    } else {
        console.log(this.state.drawerOpen)
        this.setState({ 
            drawerOpen: true 
        });


$('.contenedor').css(STYLES.contentStyle).css(STYLES.contentStyleActive);
    }
}

render() {
    return (
        <div>
            <AppBar
                title={<span style={STYLES.title}>- PLATAFORMA DE 
INCIDENCIAS -</span>}
                onTitleTouchTap={this.handleTouchTap}
                titleStyle={STYLES.titleStyle}
                iconElementLeft={this.state.drawerOpen ?  <IconButton>
<NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>}
                onLeftIconButtonTouchTap={this.controlMenu}
            />
            <Drawer 
                open={this.state.drawerOpen}
                containerStyle={this.state.drawerOpen ? 
STYLES.displayMenuTrue : STYLES.displayMenuFalse}
            >
                <MenuItem>Menu Item</MenuItem>
                <MenuItem>Menu Item</MenuItem>
                <MenuItem>Menu Item</MenuItem>
            </Drawer>
        </div>
    );
}
}

【讨论】：