嵌套参考字段答案

【问题标题】：Nested Reference Field嵌套参考字段
【发布时间】：2019-01-15 18:12:29
【问题描述】：

为了检索设备类型，我使用一个将检索设备模型，然后另一个使用设备模型的字段“typeID”引用设备类型来检索设备类型。

但它显示以下警告：

警告：失败的道具类型：无效的道具 translateChoice 类型提供给 ReferenceField 的布尔值，预期的函数。

图片代表数据模型（设备有设备型号，设备型号有设备类型）

【问题讨论】：

Support for resource nesting的可能重复

标签： react-admin

【解决方案1】：

不是一个完美的解决方案，但要解决 translateChoice 问题，您可以创建一个包装器并取出该道具以防止它被传递。

const SubReference = ({ translateChoice, children, ...props }) => (
    <ReferenceField {...props}>{children}</ReferenceField>
);

在解决此问题时，我还收到有关嵌套 a 标记的错误。我可以通过在父级 ReferenceField 中将 linkType 属性设置为 false 来消除错误

<ReferenceField source="item_id" reference="list" linkType={false}>
    <SubReference source="id_to_reference_from_list" reference="second_list">
        <TextField source="name" />
    </SubReference>
</ReferenceField>

【讨论】：

这适用于显示正确的参考。但是，似乎没有链接到正确的资源。

【解决方案2】：

我发现一个更好的解决方案有点像 hack，但似乎更有效。

以问题示例只需<ReferenceField>获取设备类型，它会是这样的：

    const EquipList = ({...props}) => {
      <List {...props}>
        <Datagrid>

          <ReferenceFieldController label="Equipment Type" reference="equipmentModel" source="modelID" linkType={false}>
            {({referenceRecord, ...props}) => (
              <ReferenceField basePath="/equipmentModel" resource="equipmentModel" reference="equipmentType" source="typeID" record={referenceRecord || {}} linkType="show">
                <TextField source="name" />
              </ReferenceField>
            )}
          </RefenceFieldController>

        </Datagrid>
      </List>
    }

在上面的示例中，<ReferenceFieldController> 获取设备的设备型号，如<ReferenceField>。标签是必需的，因为 RA 使用第一个 <ReferenceField> 来显示 <Datagrid> 中的列标题，如果您使用国际化，您应该将 translate 函数应用于此属性上的正确资源。

<ReferenceController> 获取记录并将其作为referenceRecord 传递给子函数，该子函数将呈现组件以进行字段表示。而不是呈现字段组件，而是呈现<ReferenceField> 以获取嵌套关系，然后显示字段。由于<ReferenceFieldController> 仅将控制器道具传递给其子级，并且字段组件的道具不会在嵌套关系中执行您想要的操作，因此您必须将它们显式传递给<ReferenceField>。您需要将<ReferenceField> 中的record 传递为referenceRecord || {}，因为最初的referenceRecord 尚未获取，并且<ReferenceField> 不适用于将记录设为null。

将<ReferenceFieldController 的linkType 设置为false 使其不会呈现<Link> 组件，该组件会将用户重定向到错误的路线。

【讨论】：

【解决方案3】：

我有同样的问题，我认为这是一个实际的错误。我评论了对应的github问题https://github.com/marmelab/react-admin/issues/2140

我查看了ReferenceField 的代码，据我了解，这是一个实际错误。 ReferenceField 需要 translateChoice 属性的函数，但在内部将布尔值传递给 ReferenceFieldView。如果您将一个ReferenceField 嵌套到另一个中，则内部的false 作为translateChoice 属性接收并正确地抱怨它是一个布尔值而不是一个函数。

【讨论】：