Material UI：Menuリファクタリング

Question

は、List from Material 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"/>, 

のように見え、定型の多くは明らかに存在しているので、私はコード

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; 

でduplicitiesを扱うことになる、カスタムコンポーネントを作成することにしました問題は、私がそれを使用したときです。

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

選択可能。さらに、の値を呼び出すには、メニューが展開されたときにメニューを展開するためにSelectableList id = "menu" value = {location}からMenuItemに値タグを追加する必要がありました。

このリファクタリングはどのように処理しますか？

---

更新 JSFiddle（簡略化した例）：

https://github.com/callemall/material-ui/blob/master/src/List/makeSelectable.js#L18：https://jsfiddle.net/1vk8wzoc/27/

Answer 1

[OK]を、ので、あなたのJSFiddleと材質UIのソースを見て、彼らが特定のプロパティなしで子供を拒否ように思えます

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

選択されたことを示すスタイルを受け取ります。

私はここの2つのうちの1つだろう。

1. をおそらく のlistItems
2. ためHOCのを支援するためのライブラリでPRを上げたり、使用React.cloneElementたすべきコピーすべて 間で必要なものしたがって、 のmakeSelectableの機能には正しい要素のようです。