反应管理员 |如何在 ReferenceField 中连接源代码

Question

我有一个table"fos_user"和"version"，我想显示“9.0.1.A”而不是“/版本/1”。

=>fos_user https://i.imgur.com/C8f0qor.png

=>版本 https://i.imgur.com/HFSKIdz.png

是否可以连接 "version" table 的字段以在源代码中显示它，就像这样？ https://i.imgur.com/rxJBmtp.png

因为它会阻止我在 "version" table 中创建新字段。

此致，

Answer 1

React-管理员 |如何在 ReferenceField 中连接源？

答案：

<ReferenceField label="Version" source="version" reference="versions"> <FunctionField render={version => `${version.major}.${version.minor}.${version.patch}.${version.letter}`} /> </ReferenceField>

Answer 2

我需要一个图片前缀。不幸的是，提供的解决方案对我不起作用......起初我试过

<ImageField source="prefix + contentUrl"/>

和上面的解决方案...

最终我找到了以下解决方案：

const MyImageField = ({source, record = {}, ...rest}) => {
    let clonedRecord = JSON.parse(JSON.stringify(record));
    clonedRecord[source] = process.env.REACT_APP_BASE_PATH + clonedRecord[source];
    return <ImageField source={source} record={clonedRecord} {...rest}/>;
};

export const ImageList = props => (
    <List {...props}>
        <Datagrid rowClick="edit">
            <MyImageField source="contentUrl"></MyImageField>
        </Datagrid>
    </List>
);

const dataProvider = baseHydraDataProvider(entrypoint, fetchHydra, apiDocumentationParser);

export default () => (
    <HydraAdmin dataProvider={dataProvider} authProvider={authProvider} entrypoint={entrypoint}>   
        <ResourceGuesser name={"media_objects"} list={ImageList}/>
    </HydraAdmin>
);

不知何故我需要一个克隆，因为该函数被调用了多次（-> 添加了 x 次前缀）。

我将它与 API Platform 结合使用。

另见：

https://marmelab.com/react-admin/Fields.html#writing-your-own-field-component

Answer 3

来自https://marmelab.com/react-admin/Fields.html#reference-fields

提示：如果您想显示多个字段的数据，请查看 <FunctionField>，它接受渲染函数：

import { FunctionField } from 'react-admin';

<FunctionField
    label="Name"
    render={record => `${record.first_name} ${record.last_name}`}
/>;

所以对于你的情况，它将是：

import { FunctionField } from 'react-admin';

<FunctionField
    label="Name"
    render={version => `${version.major}.${version.minor}.${version.patch}.${version.letter}`}
/>;

反应管理员 |如何在 ReferenceField 中连接源代码

React-admin | How to concat source inside ReferenceField

admin-on-rest

api-platform.com

react-admin