react ant design 中如何在表头中加个Icon,悬浮icon又触发Tooltip?

Question

如题，表头的某一列是：

<Table.Column title='目的地' dataIndex='destination' key='destination'></Table.Column>

显示效果就是‘目的地’。
我想在后面加个问号的Icon：question-circle,鼠标悬停上去的时候显示提示文字：‘这是提示’。
这里面用到了Table，Icon.Tooltip三个组件，但是不知道该怎么写出来。写法一直报错。

Answer 1

Table.Column 的 title 传值可以传入一个 ReactNode 。

所以，可以写成这样

const title = (
  <span>
    目的地
    <Tooltip title="这是提示">
      <Icon style={{ marginLeft: '0.25em' }} type="question-circle" />
    </Tooltip>
  </span>
);

<Table.Column title={title} dataIndex='destination' key='destination'></Table.Column>