在 AntD 表格单元格中添加 AntD 图标答案

【问题标题】：Add AntD icon inside AntD table cell在 AntD 表格单元格中添加 AntD 图标
【发布时间】：2020-05-05 16:33:02
【问题描述】：

我在 React 应用程序中使用 AntD。我想在表格单元格中添加一个图标，但我遇到了问题。我的特定列的代码如下：

<Column 
   title="Status" 
   dataIndex="status" 
   key="status"
   render={(status === 'locked') ? <span><Icon type="lock" /> </span> : <span> <Icon type="unlock" /></span>} 
/>

我遇到的第一个错误是意外使用了“status”，其中在我的数据源中，status 是一个字符串。

我得到的另外两个错误是

没有重载匹配这个调用。重载 1 of 2，'(props: Readonly>): Column'，给出了以下错误。类型“元素”不可分配给类型“（文本：任何，记录：未知，索引：数字）=> ReactNode”。类型“元素”不匹配签名“（文本：任意，记录：未知，索引：数字）：ReactNode”。

Overload 2 of 2, '(props: ColumnProps, context?: any): Column'，给出了以下错误。类型“元素”不可分配给类型“（文本：任意，记录：未知，索引：数字）=> ReactNode”.ts(2769)

任何人都可以帮助解决这个问题。谢谢。

【问题讨论】：

标签： reactjs antd

【解决方案1】：

render 属性接受一个函数（而不是你的 sn-p 中的值）。

另外，更易读的形式是在type 上设置条件：

const App = () => {
  return (
    <Table dataSource={dataSource}>
      <Table.Column
        title="Status"
        dataIndex="status"
        key="status"
        render={status => (
          <Icon type={status === 'locked' ? 'lock' : 'unlock'} />
        )}
      />
    </Table>
  );
};

【讨论】：