使用自定义组件显示数组

Question

我想使用 react-admin 按以下格式显示图片列表。

{
    "images": [
        {
            "created_at": "2021-03-17",
            "images": [
                {
                    "image": "http://url.com/img.jpeg"
                }
            ]
        }
    ]
}

我可以使用以下方式显示图片，

           <ArrayField source="images" label=''>
                <SingleFieldList>
                    <ArrayField source='images' label = '' sortable={false} >
                         <SingleFieldList>
                             <ImageField source='image' label = ''/>
                         </SingleFieldList>
                     </ArrayField>
                 </SingleFieldList>
             </ArrayField>

我想在自定义元素中打印这些内容，例如 div 中的每张图片。通读 [1] 和文档 [2] 提供以下示例，

const TagsField = ({ record }) => (
<ul>
    {record.tags.map(item => (
        <li key={item.name}>{item.name}</li>
    ))}
</ul>
)
TagsField.defaultProps = {
    addLabel: true
};

但是没有一个完整的例子来说明这个组件是如何使用的？如何强制自定义组件打印数组？

[1] https://github.com/marmelab/react-admin/issues/2383 [2] https://marmelab.com/react-admin/Fields.html#arrayfield