我如何在 `react-admin` "Show" 和 "Edit" 以及 "Create" 屏幕中拥有更复杂的布局？

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

我们需要更新有关此的文档。我们最近将组件与逻辑分离，我们在 ra-core 包中命名为 XXXController（ListController、CreateController 等），在 ra-ui-materialui 包中命名为 UI 组件（List、Create 等）控制器。

将 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>
);

我如何在 `react-admin` "Show" 和 "Edit" 以及 "Create" 屏幕中拥有更复杂的布局？

How do I have more complex layouts in `react-admin` "Show" and "Edit" and "Create" screens?

layout

react-admin