javascript - Ant树设计中如何将TreeNode做成链接？

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

不确定我是否完全理解您的需求，但也许可以将链接作为标题传递:

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

够好吗？

TreeNode api 中还有onCheck 和onSelect 回调。 ，它可以重定向到特定的 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 作为 prop 传递:

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

此解决方案需要 withRouter hoc要添加到应用程序中。但是如果你在父组件中有可用的路由属性，你可以直接传递它们。

更新

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