Material UI : 메뉴 리팩토링

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" /> 

menuItem이 선택할 수 있습니다. 더 나아가, SelectableList id = "menu"value = {location} (페이지가 다시로드 될 때 메뉴를 확장하기 위해) 값을 다시 호출하려면 MenuItem에도 value 태그를 추가해야했습니다.

이 리팩터링은 어떻게 처리해야합니까?

---

업데이트 JSFiddle (간체 예) :

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

Answer 1

좋아, 그래서 당신의 JSFiddle과 재료 UI 소스에서 찾고, 그들이 특정 속성없이 아이를 거부 할 것 같아

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

선택한 스타일을 나타내는 스타일을 수신합니다.

내가 할 것이 여기에 두 가지 중 하나를

1. 는 아마도
2. 또는 사용 많은 ListItems에 대한 HOC의를 지원하는 라이브러리와 PR 인상 React.cloneElement하는 해야 사본에서 모든 필요한 물건 그래서