Question

我想在列表项中呈现一个Route。当我点击链接时，li将打开并显示子组件。我尝试过这个简单的解决方案：

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      {
        topics.map(topic => (
          <li key={topic.id}>
            <Link to={`${match.url}/${link.path}`}>
              {topic.title}
            </Link>
            <Route path={`${match.path}/${topic.path}`} 
              component={Topic} />
          </li>
        ))
      }
    </ul>
  </div>
)

它有效，但我不确定这是正确的编码。我写的另一个变体是：

class Topics extends Component {
  state = { open: false }

  handleClick = value => {
    this.setState({ open: value })
  }

  render () {
    const { match } = this.props
    const { open } = this.state
    return (
      <div>
        <h1>Topics</h1>
        <ul>
          { topics.map(({ name, id }) => (
            <li key={id}
              className={(open===id) ? 'open' : null}>
              <Link to={`${match.url}/${id}`}
                onClick={() => this.handleClick(id)}>
                {name}
              </Link>
              <div>
                {
                  open===id ?
                    <Route path={`${match.path}/:topicId`}
                      render={({ match }) => (
                        <Topic
                          topic={topics.find(({ id }) =>
                            id === match.params.topicId)}
                          match={match}
                    />)}
                  /> : null
                }
              </div>
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

这些解决方案中的任何一个都是正确的吗？关于如何解决这个问题的任何其他建议？

Answer 1

我建议您为Route定义一个新组件并使用children属性。

Answer 2

你的意思是这样吗？

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      { log(match) }
      <Link to={to} {...rest}>
        { to }
      </Link>
      { match ? 
          <h1>{match.url}</h1> : null }
    </li>
  )} />
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      {
        LinksArray.map(link => (
          <ListItemLink key={link.id} 
            to={`${match.url}/${link.path}`} />
        ))
      }
    </ul>
  </div>
)

列表项内的路由

2 个答案: