Admin-on-rest- 如何在 Resource 和 Show/Edit 模式下混合组件？

Question

现在我完全按照 Admin-on-rest 的例子 (https://marmelab.com/admin-on-rest/Resource.html)。

当它打开列表（使用 DataGrid）或 Show/Edit 时，我想向该页面添加其他组件。一些分析（使用卡片）、Google 地图模块 (https://github.com/istarkov/google-map-react)、照片等

我希望他们响应迅速 "floating"。作为不同的组成部分。不是同一个。

我怎样才能做到这一点？

Answer 1

参见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- 如何在 Resource 和 Show/Edit 模式下混合组件？

Admin-on-rest- How to Mix components in Resource and Show/Edit modes?

reactjs

admin-on-rest