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

Question

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


    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>
                           
                        );
                    })}
                </>
            ),
        },
    ];

我已将以下数据添加到 table。我想将两个薄片合二为一 table。一个是标题，然后是描述。

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 is not a function

Answer 1

将 description 列的 render 更改为类似

的内容

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

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

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

How to render two elements inside an AntD table cell?

reactjs

antd