Добавить значок AntD внутри ячейки таблицы AntD

Question

Я использую AntD в приложении React. Я хочу добавить значок в ячейку таблицы, но у меня возникают проблемы. Мой код для конкретного столбца выглядит следующим образом:

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

Первая ошибка, которую я получаю: Неожиданное использование «status» из которых в моем источнике данных , status - это строка.

Другие две ошибки, которые я получаю,

---

Нет перегрузки, которая соответствует этому вызову. Перегрузка 1 из 2, '(props: Readonly>): Column', вызвала следующую ошибку. Тип «Элемент» нельзя назначить типу (текст: любой, запись: неизвестный, индекс: номер) => ReactNode '. Тип «Элемент» не обеспечивает совпадения для подписи »(текст: любой, запись: неизвестна, индекс: номер): ReactNode '.

---

Перегрузка 2 из 2, '(props: ColumnProps, context ?: any): Column', выдал следующую ошибку. Тип «Элемент» нельзя назначить типу (текст: любой, запись: неизвестный, индекс: номер) => ReactNode'.ts (2769)

Может ли кто-нибудь помочь с этим. Спасибо.

Answer 1

Свойство render принимает функцию (а не значение, как в вашем фрагменте).

Кроме того, более удобочитаемой формой является условие для type:

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