Admin-on-rest-如何在资源和显示/编辑模式中混合组件？

Question

现在我纯粹是关注Admin-on-rest的例子(https://marmelab.com/admin-on-rest/Resource.html).

当它打开List(使用DataGrid)或显示/编辑时,我想向该页面添加其他组件.一些分析(使用卡片),谷歌地图模块(https://github.com/istarkov/google-map-react),照片等.

我希望他们有回应和"浮动".作为不同的组件.不一样的.

我怎么能实现这个目标？

Answer 1

请参阅有关如何设置自定义布局的文档.因为所有admin-on-rest内容也只是反应,你可以几乎以你喜欢的方式修改它.但请注意,这需要一个体面的知识,react并且redux可能还有其他库,这些库可以在管理下使用.我会首先尝试覆盖标准布局.在自定义布局组件中,您可以在任何位置渲染您喜欢的任何组件.

此外,如果您只想自定义某个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框架.

我希望这是你的起点.