React表格中FastBackwardOutlined图标显示[object Object]问题求解

你把React元素<FastBackwardOutlined />塞进模板字符串转成了字符串，但React元素本质是一个对象，对象被强制转为字符串时就会显示[object Object]，这就是显示异常的根源。

不要在数据里拼接字符串和组件，正确做法是在表格列的渲染逻辑里处理：

1. 保留原始数据，不修改trinomialName字段：

return data?.map((row: any) => {
    return {
        ...row,
        supervisoryDoctor: row.supervisoryDoctor?.label,
        // 保留trinomialName原始文本值
    };
});

2. 在表格的列配置中，给“الاسم الثلاثي”列添加render函数，直接返回包含图标和文本的JSX结构：

const columns = [
    // 其他列配置...
    {
        title: 'الاسم الثلاثي',
        dataIndex: 'trinomialName',
        render: (text) => (
            <span>
                <FastBackwardOutlined /> {text}
            </span>
        )
    }
];

特殊场景替代方案（不推荐） #

如果你的表格组件支持直接渲染React元素作为单元格内容，也可以直接在数据里返回JSX元素：

return data?.map((row: any) => {
    return {
        ...row,
        supervisoryDoctor: row.supervisoryDoctor?.label,
        trinomialName: (
            <span>
                <FastBackwardOutlined /> {row.trinomialName}
            </span>
        )
    };
});

这种方式依赖表格组件的支持，优先用第一种方案更稳妥。

内容的提问来源于stack exchange，提问作者Hiba Youssef