,可以通过使用自定义组件或字段格式化来实现。
示例代码:
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中显示数组的两种方法。根据具体需求选择适合的方法来展示数组字段。
每个React组件强制要求必须有一个 render()。它返回一个 React 元素,是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素,则必须将它们组合在一个封闭标记内,例如 <form>、<group>、
领取专属 10元无门槛券
手把手带您无忧上云