在admin-on-rest

Question

我使用admin-on-rest在React.js中创建了一个管理面板。我有一个页面显示从api中提取数据的用户列表。我需要在该表的每一行的末尾添加一个自定义列，它将为每个用户显示一个进度条。

我正在使用名为rc-progress的模块来生成进度条。以下是当前来自用户列表的单独页面上的示例显示：

import React from 'react';
import { Line } from 'rc-progress';

var Progress = React.createClass({
render: function render() {

    return (
       <Line percent="40" strokeWidth="1" strokeColor="#38bcd5" />
    );
}
});

export default Progress;

我不确定如何将自定义列附加到admin-on-rest中的Datagrid以添加到该进度条中。

这是我为User列表提供的代码，它正确地显示了API中的数据。我添加了一条评论，我想添加进度条：

import React from 'react';
import { List, Datagrid, TextField} from 'admin-on-rest';
import { Line } from 'rc-progress';

export const UserList = (props) => (
<List {...props}>
    <Datagrid>
        <TextField source="firstName" />
        <TextField source="lastName" />
        <TextField source="email" />
        <TextField source="phone" />
        <TextField source="type" />

        //I'd like to add the progress bar below:
        //<Line percent="40" strokeWidth="1" strokeColor="#38bcd5" />

    </Datagrid>
</List>

);

导出默认UserList;

非常感谢任何帮助！

更新（解决方案）

因此，根据Gildas的建议，我尝试使用FunctionField。这是代码的工作版本。 （进度条现在有硬编码值）

import React from 'react';
import { List, Datagrid, TextField} from 'admin-on-rest';
import { Line } from 'rc-progress';
import { FunctionField } from 'admin-on-rest'

export const UserList = (props) => (
<List {...props}>
    <Datagrid>
        <TextField source="firstName" />
        <TextField source="lastName" />
        <TextField source="email" />
        <TextField source="phone" />
        <TextField source="type" />

        //Here is the working version below:
        <FunctionField label="Progress" render= {function render() { return ( <Line percent="40" strokeWidth="1" strokeColor="#38bcd5" />);}} />

    </Datagrid>
</List>

);


export default UserList;

这是当前的截图：

Answer 1

FunctionField应该可以解决问题：https://marmelab.com/admin-on-rest/Fields.html#functionfield

如果没有，您是否尝试过关注自定义字段文档？