layout - 如何在“react-admin”“显示”和“编辑”和“创建”屏幕中有更复杂的布局？

Question

我正在尝试建立在 react-admin 之上。基本结构是这样的：

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

我想做这样的事情：

<Show {...props} >
  <div className="row">
    <div className="col-sm-6">
      <TextField source="id" />
    </div>
    <div className="col-sm-6">
      <TextField source="name" />
    </div>
  </div>
</Show>

Answer 1

我们需要更新我们的文档。我们最近用逻辑解耦了组件，我们在包中命名为 XXXController（ListController、CreateController 等），在控制器ra-core的包中命名为 UI 组件（List、Create 等） 。ra-ui-materialui

将react-admin包视为带有 material-ui UI 的 react-admin 的分发。当需要大量定制时，您可以直接使用控制器。

现在，您必须探索源代码才能完全了解如何使用它们。

这是一个例子：

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

const UserShow = props => (
    <ShowController {...props}>
        {controllerProps => 
            // You're on your own here
        }
    </ShowController>
);