[英]Material-ui transition between old LeftNav menu style and the composability one with Reactjs
Ok, so I am very confused about the way of making a LeftNav menu with material-ui. 好的,所以我对使用material-ui制作LeftNav菜单的方式感到非常困惑。
I am new on the project and I updated reactjs and material-ui. 我是该项目的新手,并且更新了reactjs和material-ui。
So, a lot of stuff have been deprecated about LeftNav from material-ui and I am trying to fix it. 所以,很多东西都被弃用了关于材料-ui的LeftNav,我正试图修复它。
Here is the menu as it was when I opened the project (with all the console warning): 这是我打开项目时的菜单(带有所有控制台警告):
<LeftNav ref="leftNav"
docked={false}
style={{opacity: '0.9'}}
menuItems={menuItems}
onChange={this.leftNavOnChange} />
From this array: 从这个数组:
var menuItems = [
{ route: '/', text: 'Home' },
{ type: 'SUBHEADER', text: 'Connect' },
{ route: '/categories', text: 'Categories' },
{ route: '/icons', text: 'Icons'},
{ route: '/Tmp', text: 'Tmp', disabled: !Permissions['connect_v2_list_tmp']['isPermitted'] },
{ route: '/wizard', text: 'Wizard', disabled: !Permissions['connect_v2_analyze_spreadsheet']['isPermitted'] },
{ route: '/linkshortener', text: 'Link shortener'},
{ type: 'SUBHEADER', text: 'Visual search' },
{ route: '/whitelist', text: 'Whitelist', disabled: !Permissions['connect_v2_list_whitelist']['isPermitted'] },
{ route: '/blacklist', text: 'Blacklist', disabled: !Permissions['connect_v2_list_blacklist']['isPermitted'] },
{ type: 'SUBHEADER', text: 'Tmp-wise' },
{ route: '/viewer', text: 'Viewer', disabled: !Permissions['connect_v2_view_bw_entity']['isPermitted']},
];
And here is what I did from what I understood about the way of doing it: 以下是我从理解的方式做到的:
<LeftNav ref="leftNav"
docked={false}
style={{opacity: '0.9'}}
//menuItems={menuItems}
//onChange={this.leftNavOnChange}
>
{menuItems.map(function(items, i) {
if (items.route) {
return <MenuItem linkButton={true} href={items.route} key={i}>{items.text}</MenuItem>;
} else {
return <MenuItem data={items.type} key={i}>{items.text}</MenuItem>;
}
})}
</LeftNav>
So, less warning except one : using methods on left nav has been deprecated. 因此,除以下一项外,警告更少: 不赞成在左侧导航上使用方法。 Please refer to documentations.
请参阅文件。 but not such a big deal.
但没什么大不了的。
My problem here, is that my links are not working. 我的问题是我的链接无法正常工作。 I am staying on the same page.
我住在同一页上。 And my other main problem: all the style it had is gone.
而我的另一个主要问题是:它所有的风格都消失了。
So, my question is: am I doing it right? 所以, 我的问题是:我做得对吗?
Or am I missing something owned by reactjs and / or material-ui? 或者我错过了reactjs和/或material-ui所拥有的东西?
Thanks a lot in advance for the time spent on my request. 非常感谢您在我的请求上花费的时间。
This is what I do (I am using react-router): 这就是我所做的(我正在使用react-router):
import { browserHistory } from 'react-router';
handleLeftNav: function (route) {
browserHistory.push(route);
this.setState({
leftNavOpen: false
});
},
<MenuItem onTouchTap={() => { return this.handleLeftNav('/route/'); }}>Route</MenuItem>
If you move your map outside of the LeftNav
then you should no longer receive this warning. 如果您将地图移到
LeftNav
之外,那么您将不再收到此警告。 When I compose my LeftNav
I follow this pattern and I don't get the error you're reporting. 当我
LeftNav
我的LeftNav
我遵循这种模式,我没有得到你报告的错误。 Hope this helps. 希望这可以帮助。
let menuItems = menuItems.map(function(items, i) {
if (items.route) {
return <MenuItem linkButton={true} href={items.route} key={i}>{items.text}</MenuItem>;
} else {
return <MenuItem data={items.type} key={i}>{items.text}</MenuItem>;
}
});
<LeftNav ref="leftNav"
docked={false}
style={{opacity: '0.9'}}
//menuItems={menuItems}
//onChange={this.leftNavOnChange}
>
{ menuItems }
</LeftNav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.