在 react-admin 中如何有条件地显示 "Show" 组件中的字段？

Question

有些字段我只想在它们有值时显示。我希望这样做：

<Show {...props} >
  <SimpleShowLayout>
    { props.record.id ? <TextField source="id" />: null }
  </SimpleShowLayout>
</Show>

但这不起作用。我可以通过使每个字段成为更高阶的组件来使其在某种程度上起作用，但我想做一些更清洁的事情。这是我的 HOC 方法：

const exists = WrappedComponent => props => props.record[props.source] ?
  <WrappedComponent {...props} />: null;

const ExistsTextField = exists(TextField);

// then in the component:

<Show {...props} >
  <SimpleShowLayout>
    <ExistsTextField source="id" />
  </SimpleShowLayout>
</Show>

这正确显示了值，但去掉了标签。

Answer 1

我们需要更新有关此的文档。同时，您可以在升级指南中找到有关如何实现的信息：https://github.com/marmelab/react-admin/blob/master/UPGRADE.md#aor-dependent-input-was-removed

这是一个例子：

import { ShowController, ShowView, SimpleShowLayout, TextField } from 'react-admin';

const UserShow = props => (
    <ShowController {...props}>
        {controllerProps => 
            <ShowView {...props} {...controllerProps}>
                <SimpleShowLayout>
                    <TextField source="username" />
                    {controllerProps.record && controllerProps.record.hasEmail && 
                        <TextField source="email" />
                    }
                </SimpleShowLayout>
            </ShowView>
        }
    </ShowController>
);

Answer 2

也许这个方法有用

import { FormDataConsumer } from 'react-admin'

<FormDataConsumer>
    {
      ({ formData, ...rest}) => formData.id &&
        <>
          <ExistsTextField source="id" />
        </>
    }
</FormDataConsumer>

在 react-admin 中如何有条件地显示 "Show" 组件中的字段？

How do you conditionally show fields in "Show" component in react-admin?

conditional

react-admin