根據數據設備在 AntD 列表上插入圖標

Question

我這里有問題請任何人幫助我嗎？ 我在這里的 Ant Design 表有問題，在 Source 列中我想插入圖標，我已經插入了一個圖標，但我希望根據設備的數據更改圖標，如果設備 Id = 1，它將是“人類圖標”將顯示，但如果設備 id = 2，它將顯示“計算機圖標”。

這是代碼：

import React, { useEffect, useState } from 'react';
import { Card, Col, Divider, Layout, Row, Table, Tag } from 'antd';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Content, Footer, Header } from 'antd/lib/layout/layout';
import 'antd/dist/antd.css';
import '../Page/Dashboard.css';
import { LaptopOutlined, UserAddOutlined, UserOutlined } from '@ant-design/icons';

const columns = [
{
    title: "No",
    dataIndex: "id",
    key: "id",
},
{
    title: 'Device ID',
    dataIndex: "dev_id",
    key: "dev_id",
},
{
    title: 'Message ID',
    dataIndex: "msg_id",
    key: "msg_id",
},
{
    title: 'Time Stamp',
    dataIndex: "time_stamp",
    key: "time_stamp",
},
{
    title: 'RFID',
    dataIndex: "rfid",
    key: "rfid",
},
{
    title: 'Data Hewan',
    dataIndex: "animals",
    key: "animals",
},
{
    title: 'Weight (kg)',
    dataIndex: "weight",
    key: "weight",
},
{
    title: 'Temperature (Celcius)',
    dataIndex: "temp",
    key: "temp",
},
{
    title: 'Tags',
    dataIndex: "tags",
    key: "tags",
    render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = 'geekblue';
  
            if (tag === 'Invalid Data') {
                color = 'volcano';
            } else {
                color = 'geekblue';
            }
  
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
},
{
    title: 'Source',
    dataIndex: "",
    key: "",
    render: text => <UserOutlined />
}

];
export default function Dashboard(){
return (
     <Table column={columns} dataSource={dataQurban} />
)}

謝謝我希望你能幫助我！

Answer 1

{
    title: 'Source',
    dataIndex: "",
    key: "",
    render: (_: any, record: any) => record.dev_id === 1 ? <UserOutlined /> : <ComputerIcon />
}

上面的代碼是直接的解決方案。

如果你想優化代碼，你也可以定義一個變量。

const iconObj = {
    1: <Icon1 />,
    2: <Icon2 />,
    3: <Icon3 />,
  // ...
}
// ...
{
    title: 'Source',
    dataIndex: "",
    key: "",
    render: (_, record) => iconObj[record.dev_id]
}