React Sortable Tree如何为节点添加title属性或包裹Ant Design Tooltip

解决方案 #

React Sortable Tree 支持通过内置配置项实现两种需求，具体实现如下：

方案1：添加原生HTML title属性 #

通过generateNodeProps配置项给每个节点外层元素传递原生title属性，鼠标hover到节点区域时就会触发原生title提示：

<SortableTree
  isVirtualized={false}
  treeData={treeData}
  onChange={treeData => setTreeData(treeData)}
  // 新增以下配置
  generateNodeProps={({ node }) => ({
    title: node.title
  })}
/>

方案2：包裹Ant Design Tooltip组件 #

通过nodeContentRenderer配置项自定义节点内容渲染逻辑，将节点文字用Tooltip组件包裹即可：

// 提前导入Tooltip组件
import { Tooltip } from 'antd';

<SortableTree
  isVirtualized={false}
  treeData={treeData}
  onChange={treeData => setTreeData(treeData)}
  // 新增以下配置
  nodeContentRenderer={({ node }) => (
    <Tooltip title={node.title} placement="right">
      <span>{node.title}</span>
    </Tooltip>
  )}
/>

两种方案按需选择其一即可，不需要同时配置；如果需要调整Tooltip的触发方式、样式、提示内容，直接修改Tooltip组件的对应属性即可。

内容的提问来源于stack exchange，提问作者Darya Balu