如何在 AntD 表格单元格中渲染两个元素？答案

【问题标题】：How to render two elements inside an AntD table cell?如何在 AntD 表格单元格中渲染两个元素？
【发布时间】：2021-07-03 13:11:05
【问题描述】：

我想在 AntD 表的同一个单元格中添加标题和描述。我已经定义了如下列，


    const columns = [
        {
            title: 'Ref#',
            dataIndex: 'refNumber',
            key: 'refNumber',
            width: "20%",
        },
        {
            title: 'Description',
            key: 'description',
            dataIndex: 'description',
            render: description => (
                <>
                    {description.map(descriptions => {
                        return (
                            <Title level={5}>{descriptions.title}</Title>
                           
                        );
                    })}
                </>
            ),
        },
    ];

我已将以下数据添加到表中。我想在一张桌子上显示两个薄。一个是标题，然后是描述。

const data = [
        {
            key: '1',
            refNumber: 'John Brown',
            description: {
                title: "Product Catalog",
                message: "Export - Need to change description column data in exported file as it includes product code",
            }
        },
    ];

    return (
        <>
            <div>
                {footerText + " version "}
                <a onClick={showModal}>
                    {version}
                </a>
            </div>
            <Modal
                title="Release Note"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}>
                <Table
                    columns={columns}
                    dataSource={data}
                    bordered={true}
                    pagination={false}
                />
            </Modal>
        </>
    );
});

但这会产生以下错误

TypeError：description.map 不是函数

【问题讨论】：

标签： reactjs antd

【解决方案1】：

将description 列的render 更改为类似

render: (description) => (
    <>
      <Title level={5}>{description.title}</Title>
      <p>{description.message}</p>
    </>
  )

因为description 不是数组，所以它没有map 方法

【讨论】：