Как сделать TreeNode в дизайне дерева Ant как ссылку?

Question

У меня есть дизайн дерева от Ant Design, все сделано, но в некоторых конкретных местах я хочу, чтобы узел дерева действовал как ссылка, пытался дать ссылку напрямую, но это не сработало.

array.map((node) => {
   if(node.type !== 'last') {
      <TreeNode title={item.name} key={item.id} dataRef={item} />
   } else{
      <Link className="container" to={{ pathname: 'somepath'}}></Link>
  }

})

Answer 1

Не уверен, что я полностью понимаю, что вам нужно, но, возможно, передайте Link в качестве заголовка:

<TreeNode
    title={<Link className="container" to={{ pathname: 'somepath'}}>{item.name}</Link>}
    key={item.id}
    dataRef={item}
/>

достаточно хорошо?

Также есть обратные вызовы onCheck и onSelectв TreeNode api , который может перенаправить на конкретный URL, например:

class LinkAbleTreeNode extends PureComponent {
  onCheck = () => {
    props.history.push(props.url)
  }

  render() {
    return <TreeNode title={item.name} key={item.id} dataRef={item} onCheck={this.onCheck} />
  }
}

export default withRouter(LinkAbleTreeNode);

и передать URL в качестве реквизита:

<LinkAbleTreeNode /*...tree node args... */ url='somepath' />

Для этого решения требуется withRouter hoc для добавления в приложение.Но если у вас есть реквизиты маршрутизатора в родительском компоненте, вы можете просто пропустить их.