使用“材质UI”菜单时在控制台中获得警告。给我建议解决方案。我在文本对象中使用HTML

Question

警告：失败的proType：无效的prop文本类型的对象提供给LinkMenuItem，预期的字符串。检查Menu的渲染方法

这是我的密码

var menuItems = [ // text is not valid text
  { route: 'test1', text: <div className="sideMainNav User"><i><img src="/static/images/icons/test1.svg" alt="test1" /></i><span>test1 </span></div>, type: MenuItem.Types.LINK, payload: '#/test1' },
  { route: 'test2', text: <div className="sideMainNav"><i><img src="/static/images/icons/test2.svg" alt="test2" /></i><span>test2</span></div>, type: MenuItem.Types.LINK, payload: '#/test2' },
  { route: 'test3', text: <div className="sideMainNav"><i><img src="/static/images/icons/test3.svg" alt="test3" /></i><span>test3</span></div>, type: MenuItem.Types.LINK, payload: '#/test3' },
  { route: 'test4', text: <div style={{margin:'0px -8px',fontWeight:'bold',color:'#58595B',fontSize:'14px'}}>test4</div>, type: MenuItem.Types.LINK, payload: '#/test4' },
  { route: 'test5', text: <div style={{margin:'0px -8px',fontWeight:'bold',color:'#58595B',fontSize:'14px'}}>test5</div>, type: MenuItem.Types.LINK, payload: '#/test5' },
  { route: 'test6', text: <div style={{margin:'0px -8px',fontWeight:'bold',color:'#58595B',fontSize:'14px'}}>test6</div>, type: MenuItem.Types.LINK, payload: '#/' },
  { route: 'test7', text: <div className="sideLogout" onClick={this.logout}>test7</div> },
  { route: 'test8', text: <div className="sidenavPlink"> <a href="#/">test8</a></div> },
  { route: 'test9', text: <div className="sidenavHelplink"> <a href="#/"><span>Help</span><i><img src="/static/images/icons/test9.svg" width="16px"/></i></a></div> }
];

Answer 1

从材质UI代码库中，文本属性只能是字符串。。。

text: React.PropTypes.string.isRequired,

您应该使用MenuItem，它采用可以有节点的主文本道具。