ShowController with TabbedShowLayout

Question

我实际上正在使用React Admin做一个面板，我发现了允许在Show View中使用Material UI组件的<ShowController>。

但我的问题来了，我使用了<TabbedShowLayout>，但效果不太好。让我解释一下：

<ShowController {...props}>
{controllerProps =>
<ShowView {...props} {...controllerProps}>
<TabbedShowLayout {...controllerProps}>
<Tab icon={<AssignIcon />}>
<div>
<TextField source="id" />
</div>
</Tab>
</TabbedShowLayout>
</ShowView>
}
</ShowController>

这是我的实际代码，它只显示带有图标的选项卡。但如果我去掉<div>组件，它就可以工作了。

我想知道，如果有人曾经这样做，并使它发挥作用。

提前感谢

Answer 1

原因是属性继承不是"原生"的，必须手动进行。react admin正在每个组件中执行此操作。

在react管理窗体或布局中插入div元素时，会破坏Tab和TextField之间的继承。div正在从父Tab接收props，但不将它们转发到TextField。

一种解决方案是制作一个自定义包装器。在您的情况下：

<ShowController {...props}>
{controllerProps =>
<ShowView {...props} {...controllerProps}>
<TabbedShowLayout {...controllerProps}>
<Tab icon={<AssignIcon />}>
<CustomDiv>
<TextField source="id" />
</CusomDiv>
</Tab>
</TabbedShowLayout>
</ShowView>
}
</ShowController>

带

const CustomDiv = ({children, ...props}) => (
<div>
{
React.Children.map(children, child => React.cloneElement(child, {...props, ...child.props}))
}
</div>
);