,可以通过使用自定义组件或字段格式化来实现。
示例代码:
import React from 'react';
const ArrayField = ({ record }) => {
const arrayAsString = record.arrayField.join(', '); // 将数组转换为逗号分隔的字符串
// 或者使用以下代码将数组以列表形式显示
// const arrayAsList = record.arrayField.map(item => <li key={item}>{item}</li>);
return (
<span>{arrayAsString}</span>
// 或者使用以下代码将数组以列表形式显示
// <ul>{arrayAsList}</ul>
);
};
export default ArrayField;
然后,在React-Admin的资源配置中,使用<ArrayField />
组件来显示数组字段。
示例代码:
import React from 'react';
import { List, Datagrid, TextField } from 'react-admin';
import ArrayField from './ArrayField';
const MyResourceList = (props) => (
<List {...props}>
<Datagrid>
<TextField source="id" />
<ArrayField source="arrayField" />
{/* 其他字段 */}
</Datagrid>
</List>
);
export default MyResourceList;
<TextField />
组件,并通过format
属性指定一个函数来格式化数组字段。示例代码:
import React from 'react';
import { List, Datagrid, TextField } from 'react-admin';
const formatArrayField = (record) => record.arrayField.join(', '); // 将数组转换为逗号分隔的字符串
const MyResourceList = (props) => (
<List {...props}>
<Datagrid>
<TextField source="id" />
<TextField source="arrayField" format={formatArrayField} />
{/* 其他字段 */}
</Datagrid>
</List>
);
export default MyResourceList;
以上是在React-Admin中显示数组的两种方法。根据具体需求选择适合的方法来展示数组字段。
领取专属 10元无门槛券
手把手带您无忧上云