reactjs - 在 AntD 表格单元格中添加 AntD 图标

Question

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

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

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

我得到的另外两个错误是

没有重载匹配这个调用。
重载 1 of 2，'(props: Readonly>): Column'，出现以下错误。
类型 'Element' 不能分配给类型 '(text: any, record: unknown, index: number) => ReactNode'。
类型 'Element' 不匹配签名 '(text: any, record: unknown, index: number): ReactNode'。

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

任何人都可以提供帮助。谢谢你。

Answer 1

render property 接受一个函数(而不是像您的代码段中那样的值)。

此外，更易读的形式是在 type 上设置条件。 :

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