时间戳

首页 > 解决方案 > 如何将 Ant 树设计中的 TreeNode 作为链接？

javascript - 如何将 Ant 树设计中的 TreeNode 作为链接？

问题描述

我有一个来自 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>
  }

})

标签： javascriptreactjsantd

解决方案

不确定我是否完全理解您的需求，但可能会将链接作为标题传递：

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

够好吗？

TreeNode api中还有回调onCheck，可以重定向到特定的 url，即：onSelect

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添加到应用程序中。但是，如果您在父组件中有可用的路由器道具，则可以将它们传递出去。

更新

对于 antd v4，仅title使用自定义组件传递 prop 是可接受的解决方案。

推荐阅读