反应管理员 |如何在 ReferenceField 中连接源答案

【问题标题】：React-admin | How to concat source inside ReferenceField反应管理员 |如何在 ReferenceField 中连接源
【发布时间】：2018-12-27 08:57:38
【问题描述】：

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

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

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

是否可以像这样连接“版本”表的字段以在源中显示它？ https://i.imgur.com/rxJBmtp.png

因为它会阻止我在“版本”表中创建新字段。

最好的问候，

【问题讨论】：

我设法用这段代码做到了，我希望它对某人有用：i.imgur.com/NMLLcM8.png
非常好的实现。您可以将解决方案写成您问题的答案，并将其标记为“已解决您的问题”！
你能告诉我怎么做吗？
这里有一些帮助：stackoverflow.com/help/self-answer

标签： admin-on-rest api-platform.com react-admin

【解决方案1】：

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

答案：

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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}`}
/>;

【讨论】：