我只想显示一些具有值的字段。我希望这样做:
<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>
这可以正确显示值,但是会剥离标签。
答案 0 :(得分:3)
我们需要更新我们的文档。同时,您可以在升级指南中找到有关如何实现的信息: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>
);