材質UI：菜單重構

試圖重構我的菜單，使用列表從材料UI。材質UI：菜單重構

的unrefactored菜單看起來像這樣

<SelectableList id="menu" value={location}> 
    <ListItem primaryText="Encoding" primaryTogglesNestedList={true} value="/encoding" nestedItems={[ 
     <ListItem primaryText="Base32" containerElement={<Link to="/base32"/>} value="/base32"/>, 
     <ListItem primaryText="Base32Hex" containerElement={<Link to="/base32Hex"/>} value="/base32Hex"/>, 
     <ListItem primaryText="Base64" containerElement={<Link to="/base64"/>} value="/base64"/>,

，並明確有很多的樣板，所以我決定創建一個自定義組件，這將處理duplicities代碼

import React from 'react'; 
import {ListItem} from 'material-ui/List' 
import {Link} from 'react-router' 

const MenuItem = ({anchor, ...other}) => (
    <ListItem containerElement={<Link to={anchor} />} value={anchor} {...other} key={"item-"+ anchor}/> 
); 


export default MenuItem;

問題是，當我用它

<MenuItem primaryText="Base32" anchor="/base32" />

menuItem不再是可選。更進一步，召回從SelectableList的ID值=「菜單中的」值= {}位置（擴展菜單，當頁面刷新），我不得不增加值標籤菜單項和（口是心非回）。

我應該如何處理這種重構？

更新的jsfiddle（簡化的例子）：https://jsfiddle.net/1vk8wzoc/27/

來源

2017-03-01 malejpavouk

你可以發佈codepen或東西p租？ – Chris

好一點，https://jsfiddle.net/1vk8wzoc/27/ – malejpavouk

好了，看你的jsfiddle和材料UI源，它似乎像他們拒絕孩子沒有一定的屬性：

https://github.com/callemall/material-ui/blob/master/src/List/makeSelectable.js#L18

extendChild(child, styles, selectedItemStyle) { 
    if (child && child.type && child.type.muiName === 'ListItem') { 
    ....

因此，你的組件是從來沒有接收樣式以指示其選定。

我會做的此兩件事情之一：

可能提高與圖書館公關支持HOC對 listItems中
或者，使用React.cloneElement這應該副本的所有需要的東西跨越所以它似乎是正確的元素 makeSelectable函數

來源

2017-03-02 09:31:45 Chris

非常感謝，我提出在材料UI的GitHub的（https://github.com/callemall/material-ui/issues/6263）票。 – malejpavouk

材質UI：菜單重構

回答

相關問題