0

现在我纯粹遵循 Admin-on-rest ( https://marmelab.com/admin-on-rest/Resource.html ) 的示例。

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

我希望他们响应和“浮动”。作为不同的组件。不是同一个。

我怎么能做到这一点？

4

1 回答 1

5

请参阅有关如何设置自定义布局的文档。因为里面的一切admin-on-rest也只是反应，你几乎可以用你喜欢的每一种方式来修改它。但是请注意，这需要对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 框架。

我希望这是你的起点。

于 2017-07-02T21:07:24.707 回答