React Material UI makeSelectableリストがネストされたListItemコンポーネントと互換性がありません

Question

ListItemを直接使用するのではなく、子コンポーネントからListItemを使用したときにmakeSelectableコードが機能しないという問題があります。ここに私のコード例があります（workingLinkItemsは正常に選択できますが、notWorkingLinkItemsは選択できません）。

import React, { Component, PropTypes } from 'react' 
import { List, makeSelectable, ListItem } from 'material-ui/List' 
import { wrapState } from 'helpers/utils' 

const { func, shape, string, number } = PropTypes 

class TryListItem extends Component { 
    static propTypes = { 
    onOpenLink: func.isRequired, 
    linkItem: shape({ 
     key: number.isRequired, 
     link: string.isRequired, 
     text: string.isRequired, 
    }).isRequired, 
    } 

    handleOpenLink =() => { 
    this.props.onOpenLink(this.props.linkItem.link) 
    } 

    render() { 
    const { key, link, text } = this.props.linkItem 

    return <ListItem 
     value={key} 
     primaryText={text} 
     onTouchTap={this.handleOpenLink} /> 
    } 
} 

let SelectableList = makeSelectable(List) 
SelectableList = wrapState(SelectableList) 

class TrySelectableList extends Component { 
    handleOpenLink = (location) => { 
    console.log('The page will be redirected to: ', location) 
    } 

    render() { 
    const links = [ 
     { 
     key: 1, 
     link: '/home', 
     text: 'Home', 
     }, 
     { 
     key: 2, 
     link: '/about', 
     text: 'About Us', 
     }, 
     { 
     key: 3, 
     link: '/contact', 
     text: 'Contact Us', 
     }, 
    ] 

    const notWorkingLinkItems = links.map((link) => (
     <TryListItem 
     onOpenLink={this.handleOpenLink} 
     linkItem={link} /> 
    )) 

    const workingLinkItems = links.map((link) => (
     <ListItem 
     value={link.key + 3} 
     primaryText={link.text} 
     onTouchTap={this.handleOpenLink} /> 
    )) 

    return (
     <div> 
     <SelectableList defaultValue={1}> 
      {notWorkingLinkItems} 
      {workingLinkItems} 
     </SelectableList> 
     </div> 
    ) 
    } 
} 

export default TrySelectableList 

私のコードに何が悪いと思いますか？

Answer 1

最後に、material-ui makeSelectable関数を使用して多くの試練を行った後。私は自分の選択可能なスタイルを作り上げてしまった。 ここに私の問題のための私のコードソリューションです：

import React, { Component, PropTypes } from 'react' 
import { List, ListItem } from 'material-ui/List' 

const { bool, func, shape, string, number } = PropTypes 

class TryListItem extends Component { 
    static propTypes = { 
    selected: bool.isRequired, 
    onOpenLink: func.isRequired, 
    linkItem: shape({ 
     link: string.isRequired, 
     text: string.isRequired, 
    }).isRequired, 
    } 

    handleOpenLink =() => { 
    this.props.onOpenLink(this.props.linkItem.link, this.props.linkItem.key) 
    } 

    render() { 
    const { key, link, text } = this.props.linkItem 

    const styles = this.props.selected 
     ? { backgroundColor: 'rgba(0, 0, 0, 0.2)', } 
     : {} 

    return <ListItem 
     primaryText={text} 
     onTouchTap={this.handleOpenLink} 
     style={styles} /> 
    } 
} 

class TrySelectableList extends Component { 
    componentWillMount =() => { 
    this.buildLink() 
    } 

    buildLink = (selectedIndex = 0) => { 
    const initialLinks = [ 
     { 
     key: 1, 
     link: '/home', 
     text: 'Home', 
     selected: false, 
     }, 
     { 
     key: 2, 
     link: '/about', 
     text: 'About Us', 
     selected: false, 
     }, 
     { 
     key: 3, 
     link: '/contact', 
     text: 'Contact Us', 
     selected: false, 
     }, 
    ] 

    const links = initialLinks.map((link) => { 
     if (link.key === selectedIndex) { 
     link.selected = true 
     } 
     return link 
    }) 

    this.setState({ 
     links: links 
    }) 
    } 

    handleOpenLink = (location, index) => { 
    console.log('The page will be redirected to: ', location) 
    this.buildLink(index) 
    } 

    render() { 
    const workingLinkItems = this.state.links.map((link) => (
     <TryListItem 
     key={link.key} 
     selected={link.selected} 
     onOpenLink={this.handleOpenLink} 
     linkItem={link} /> 
    )) 

    return (
     <div> 
     <List> 
      {workingLinkItems} 
     </List> 
     </div> 
    ) 
    } 
} 

export default TrySelectableList