office-ui-fabric - 如何在 Fabric DetailsList 中呈现包含文本和工具提示图标的列标题

Question

在 DetailsList 中，是否可以使用文本和带有如下工具提示的图标来呈现特定的列标题：（我尝试使用 onRenderDetailsHeader 但我不确定如何处理特定列）。

标签： office-ui-fabric

Answer 1

hack 的方式，虽然nameprop 被定义为字符串类型，但实际上我们可以传递一个 ReactNode 给它，只需要将它的类型强制转换为 any。

示例代码：

import { Tooltip } from 'antd'
import { InfoCircleOutlined } from '@ant-design/icons'

const columns: IColumn[] = [
{
  name: <div>xxx <Tooltip title="tooltip"><InfoCircleOutlined /></Tooltip></div> as any,
  ...
},
...
]

<DetailsList columns={columns} .../>

效果：