带有 TabbedShowLayout 的 ShowController

Question

我实际上正在使用 React-Admin 制作仪表板，我发现 <ShowController> 允许在显示视图中使用 Material-UI 组件。

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

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

这是我的实际代码，除了带有图标的选项卡外，它什么都不显示。但是如果我删除 <div> 组件，它就可以工作了。

我想知道，是否有人这样做过，并且成功了。

提前致谢

Answer 1

原因是属性继承不是 "native"，您必须手动进行。 react-admin 在每个组件中都在做。

当你在 react-admin 表单或布局中插入一个 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>
);

带有 TabbedShowLayout 的 ShowController

ShowController with TabbedShowLayout

react-admin