您如何有条件地在“显示”字段中显示字段?反应管理员中的组件? [英] How do you conditionally show fields in "Show" component in react-admin?
问题描述
我只想显示一些具有值的字段。我希望这样做:
Some fields I want to only show if they have a value. I would expect to do this like so:
<Show {...props} >
<SimpleShowLayout>
{ props.record.id ? <TextField source="id" />: null }
</SimpleShowLayout>
</Show>
但这是行不通的。我可以通过使每个字段成为高阶组件来使其有所工作,但我想做一些更简洁的事情。这是我拥有的HOC方法:
But that doesn't work. I can make it somewhat work by making each field a higher order component, but I wanted to do something cleaner. Here's the HOC method I have:
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>
这可以正确显示值,但会去除标签。
This correctly shows the value, but strips the label.
推荐答案
我们需要更新有关此内容的文档。同时,您可以在升级指南中找到有关如何实现此目标的信息: https://github.com/marmelab/react-admin/blob/master/UPGRADE.md#aor-dependent-input-was-removed
We need to update our documentation about this. In the mean time, you can find informations about how to achieve that in the upgrade guide: 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>
);
这篇关于您如何有条件地在“显示”字段中显示字段?反应管理员中的组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!