使用 Material UI 菜单时在控制台中收到警告。建议我解决方案。我在文本对象中使用 HTML

Question

警告：propType 失败：提供给 LinkMenuItem 的 object 类型的无效道具 text，应为 string。检查 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

来自Material-UI code-base, text 属性只能是字符串...

text: React.PropTypes.string.isRequired,

您应该使用 MenuItem，它采用可以具有节点的 primaryText 属性。

使用 Material UI 菜单时在控制台中收到警告。建议我解决方案。我在文本对象中使用 HTML

Getting a warning in Console when using Material UI menu. Suggest me solution. I am using HTML in text object

javascript

reactjs

material-ui