学习 react 和 material ui 过程中遇到的几个 js 问题想请教,下面是代码
import React, {Component} from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import FlatButton from 'material-ui/FlatButton';
import ActionList from 'material-ui/svg-icons/action/list';
import ActionAccount from 'material-ui/svg-icons/action/account-box';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import Drawer from 'material-ui/Drawer';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
class MyDrawer extends Component {
menu = "empty";
isOpen(status) {
return (status === this.menu)
};
}
class AccountDrawer extends MyDrawer {
menu = "account";
render() {
return (
<Drawer open={this.isOpen(this.props.status)}>
<AppBar title="账号管理"
showMenuIconButton={false}
onTitleClick={this.props.close}/>
<MenuItem>角色列表</MenuItem>
<MenuItem>用户列表</MenuItem>
</Drawer>
);
}
}
class GlobalDrawer extends MyDrawer {
menu = "global";
render() {
return (
<Drawer open={this.isOpen(this.props.status)}>
<AppBar title="全局服务"
showMenuIconButton={false}
onTitleClick={this.props.close}/>
<MenuItem>服务器列表</MenuItem>
<MenuItem>数据库列表</MenuItem>
</Drawer>
);
}
}
class MyApp extends Component {
constructor() {
super();
this.state = {
logged: false,
drawer: "close"
};
}
login = (event) => {
if (this.state.logged) {
this.setState({logged: false, drawer: "close"});
}
else {
this.setState({logged: true});
}
};
openDrawer = (drawer, event) => {
this.setState({drawer: drawer});
};
closeDrawer = (event) => {
this.setState({drawer: "close"});
};
render() {
return (
<MuiThemeProvider>
<AppBar title="后台管理系统"
iconElementLeft={
<IconMenu {...this.props}
iconButtonElement={<IconButton><ActionList /></IconButton>}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}>
<MenuItem primaryText="账号管理" onClick={this.openDrawer.bind(this, "account")}/>
<MenuItem primaryText="全局服务" onClick={this.openDrawer.bind(this, "global")}/>
<MenuItem primaryText="游戏管理"
rightIcon={<ArrowDropRight />}
menuItems={[
<MenuItem primaryText="游戏 A"
onClick={this.openDrawer.bind(this, "gameA")}/>,
<MenuItem primaryText="游戏 B"
onClick={this.openDrawer.bind(this, "gameB")}/>,
<MenuItem primaryText="游戏 C"
onClick={this.openDrawer.bind(this, "gameC")}/>,
]}
/>
<MenuItem primaryText="运营管理"
rightIcon={<ArrowDropRight />}
menuItems={[
<MenuItem primaryText="全局"
onClick={this.openDrawer.bind(this, "yunyinGlobal")}/>,
<MenuItem primaryText="游戏 A"
onClick={this.openDrawer.bind(this, "yunyinGgameA")}/>,
<MenuItem primaryText="游戏 B"
onClick={this.openDrawer.bind(this, "yunyinGgameB")}/>,
<MenuItem primaryText="游戏 C"
onClick={this.openDrawer.bind(this, "yunyinGgameC")}/>,
]}
/>
</IconMenu>}
iconElementRight={this.state.logged ?
<IconMenu {...this.props}
iconButtonElement={
<IconButton tooltip="账户">
<ActionAccount />
</IconButton>}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}>
<MenuItem primaryText="刷新" />
<MenuItem primaryText="帮助" />
<MenuItem primaryText="登出"
onClick={this.login}/>
</IconMenu> :
<FlatButton {...this.props} label="登陆"
onClick={this.login}
/>}
onTitleClick={this.closeDrawer}
/>
<AccountDrawer status={this.state.drawer} close={this.closeDrawer}/>
<GlobalDrawer status={this.state.drawer} close={this.closeDrawer}/>
</MuiThemeProvider>
);
}
}
export default MyApp;
问题一 python 里类可以直接访问到类属性,这样就可以通过 AccountDrawer.menu 获取到对应字符串 JS 里不行,意味着我就要把所有的相关 menu 名字定义到外面的常量里?然后 class 和外部都等于这个常量？ 大一点的工程里都是这样做的?
问题二 AppBar 中 iconElementLeft 里的 IconMenu 可以不可以请求外部 json 获取列表生成,我试了半天没试出可实现的语法 0 0
问题三 Drawer 的实现方法是否是合理的
这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.