如何在Fabric DetailsList

Question

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

Answer 1

这里是Codepen，我整理得很快。唯一的问题是我无法将信息图标渲染为工具提示的目标。也许这会为您提供一个良好的开端。

function onRenderDetailsHeader(props, defaultRender?) {
   return defaultRender!({
      ...props,
      onRenderColumnHeaderTooltip: (tooltipHostProps) => {
         return (
            <Fabric.TooltipHost {...tooltipHostProps} />
         )
      }
   })
}

Answer 2

一种破解方式，尽管name道具被定义为字符串类型，实际上我们可以将ReactNode传递给它，只需要将其类型转换为任意类型即可。

示例代码：

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} .../>

效果：

Answer 3

我的解决方案类似于 Vitalie Braga's，但通过更详细的 onRenderColumnHeaderTooltip 返回，您可以实现此功能。我基于从 this stack overflow question 填充 tooltipHostProps.children，您还可以在那里看到有关工具提示标题样式的更多信息。

实现过滤的一种方法是查看 tooltipHostProps.id 以指定您只需要某些列标题单元格上的工具提示图标。在您的示例中，代码如下所示：

function onRenderDetailsHeader(props, defaultRender?) {
   return defaultRender!({
      ...props,
      onRenderColumnHeaderTooltip=(tooltipHostProps) => (
            <>
                <span>
                    {tooltipHostProps?.children}
                </span>
                {tooltipHostProps?.id?.includes('value') &&
                    <span>
                        <TooltipHost content={"This is the tooltip"}>
                            <Icon iconName="info" />
                        </TooltipHost>
                    </span>
                }
            </>
        )}
   );
};