Admin-on-rest- 如何在 Resource 和 Show/Edit 模式下混合组件?
Admin-on-rest- How to Mix components in Resource and Show/Edit modes?
现在我完全按照 Admin-on-rest 的例子 (https://marmelab.com/admin-on-rest/Resource.html)。
当它打开列表(使用 DataGrid)或 Show/Edit 时,我想向该页面添加其他组件。一些分析(使用卡片)、Google 地图模块 (https://github.com/istarkov/google-map-react)、照片等
我希望他们响应迅速 "floating"。作为不同的组成部分。不是同一个。
我怎样才能做到这一点?
参见docs on how to setup a custom layout. As everything in admin-on-rest
is also just react you can modify it nearly in every way you like。但是请注意,这需要对 react
和 redux
以及 admin-on-rest 在幕后使用的其他库有一定的了解。我会首先尝试覆盖标准布局。在您的自定义布局组件中,您可以在任何地方呈现您喜欢的任何组件。
此外,如果您只想自定义某个 ListView,您可以将自己的组件传递给 <Ressource>
组件,如下所示:
<Admin restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
<Resource name="posts" list={MyCustomPostList} /* other views */ />
</Admin>
然后在 /src/MyCustomPostList.js
中是这样的:
class MyCustomPostList extends React.Component {
render() {
const {myOwnProp, ...otherProps} = this.props;
return (
<div>
// render your own components here
<AnyComponent myOwnProp={myOwnProp} />
<AGoogleMapsComponent />
// render the normal <List> component
<List {...otherProps}>
<Datagrid>
<TextField source="id" />
<TextField source="title" />
<TextField source="body" />
</Datagrid>
</List>
</div>
);
}
}
因为这不是一项微不足道的任务,您不会在这里找到任何人向您提供详细的解决方案。您可以从我添加的链接开始,然后自己尝试。如果你在去那里的路上遇到任何具体问题,你可以回来问一个关于这个的具体问题。
如果您希望它具有响应性和浮动性,您可以使用例如flexbox 或任何网格 css 框架。
我希望这是你的起点。
现在我完全按照 Admin-on-rest 的例子 (https://marmelab.com/admin-on-rest/Resource.html)。
当它打开列表(使用 DataGrid)或 Show/Edit 时,我想向该页面添加其他组件。一些分析(使用卡片)、Google 地图模块 (https://github.com/istarkov/google-map-react)、照片等
我希望他们响应迅速 "floating"。作为不同的组成部分。不是同一个。
我怎样才能做到这一点?
参见docs on how to setup a custom layout. As everything in admin-on-rest
is also just react you can modify it nearly in every way you like。但是请注意,这需要对 react
和 redux
以及 admin-on-rest 在幕后使用的其他库有一定的了解。我会首先尝试覆盖标准布局。在您的自定义布局组件中,您可以在任何地方呈现您喜欢的任何组件。
此外,如果您只想自定义某个 ListView,您可以将自己的组件传递给 <Ressource>
组件,如下所示:
<Admin restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
<Resource name="posts" list={MyCustomPostList} /* other views */ />
</Admin>
然后在 /src/MyCustomPostList.js
中是这样的:
class MyCustomPostList extends React.Component {
render() {
const {myOwnProp, ...otherProps} = this.props;
return (
<div>
// render your own components here
<AnyComponent myOwnProp={myOwnProp} />
<AGoogleMapsComponent />
// render the normal <List> component
<List {...otherProps}>
<Datagrid>
<TextField source="id" />
<TextField source="title" />
<TextField source="body" />
</Datagrid>
</List>
</div>
);
}
}
因为这不是一项微不足道的任务,您不会在这里找到任何人向您提供详细的解决方案。您可以从我添加的链接开始,然后自己尝试。如果你在去那里的路上遇到任何具体问题,你可以回来问一个关于这个的具体问题。
如果您希望它具有响应性和浮动性,您可以使用例如flexbox 或任何网格 css 框架。
我希望这是你的起点。