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

Question

我想在 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>
        </>
    );
});

但这会产生以下错误

类型错误：描述。map 不是 function

Answer 1

将description列的render更改为类似

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

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