React Material UI makeSelectable List 与嵌套 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