我如何在“react-admin"“Show"中有更复杂的布局?和“编辑"和“创造"屏幕? [英] How do I have more complex layouts in `react-admin` "Show" and "Edit" and "Create" screens?

问题描述

我正在尝试构建 react-admin.基本结构是这样的:

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

我想做这样的事情:

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

<div className="col-sm-6"><TextField source="name"/>

</显示>

解决方案

我们需要更新我们的文档.我们最近将组件与逻辑解耦，我们将 ra-core 包中的 XXXController(ListController、CreateController 等)和 ra-ui- 中的 UI 组件(List、Create 等)命名为控制器的materialui包.

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

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

这是一个例子:

import { ShowController, ShowView, SimpleShowLayout, TextField } from 'react-admin';const UserShow = props =>(<ShowController {...props}>{controllerProps =>//在这里你是一个人}</ShowController>);

I'm trying to build on react-admin. The base structure is this:

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

I'm looking to do something like this:

<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>

解决方案

We need to update our documentation about this. We recently decoupled components with logic, that we name XXXController (ListController, CreateController, etc) in the ra-core package and UI components (List, Create, etc) in the ra-ui-materialui package which the controllers.

Think about the react-admin package as a distribution of react-admin with material-ui UI. When heavy customization is needed, you can use the controllers directly.

For now, you'll have to explore the source code to fully understand how to use them.

Here's an example:

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

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

这篇关于我如何在“react-admin"“Show"中有更复杂的布局?和“编辑"和“创造"屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！