一个页面上的两个不同的列表组件

Question

所以我试图在一个屏幕上基本上有两个列表，我有一个向导，在这一步中我正在链接实体，例如将用户添加到配置文件

我以为起点，然后给实体起了不同的名字，但仍然不知道该怎么做。基本上模式不应该绑定到 url，只是可以添加到配置文件的用户列表，然后在这个模式后面是该配置文件中的用户列表

initPropsLinkDeviceList = {
    basePath: "/profiles/create/link-devices",
    hasCreate: false,
    hasEdit: false,
    hasList: true,
    hasShow: false,
    history: {},
    location: { pathname: "/profiles/create/link-devices", search: "", hash: "", state: undefined },
    match: { path: "/profiles/create/link-devices", url: "/profiles/create/link-devices", isExact: true, params: {} },
    options: {},
    unlinked: "true",
    permissions: null,
    resource: "profile-users-unlinked",
    listactions: null,
    profileId: null,
}

在自定义路由中：

    <Route exact path="/profiles/create/:id/:step" component={ProfileWizard} />,

在应用程序中： <Admin> <Resource name="profile-devices" /> <Resource name="profile-devices-unlinked" />

ProfileDevices.js

componentDidMount() {
    var initProps = {
        basePath: `/profiles/create/${this.props.match.params.id}/link-devices`,
        hasCreate: false,
        hasEdit: false,
        hasList: true,
        hasShow: false,
        history: {},
        location: { pathname: `/profiles/create/${this.props.match.params.id}/link-devices`, search: "", hash: "", state: undefined },
        match: { path: `/profiles/create/${this.props.match.params.id}/link-devices`, url: `/profiles/create/${this.props.match.params.id}/link-devices`, isExact: true, params: {} },
        options: {},
        unlinked: "true",
        permissions: null,
        resource: "profile-devices",
        profileId: this.props.match.params.id,
        listactions: <ProfileDevicesListActions profileId={this.props.match.params.id} />
    }
    this.setState({ 'initProps': initProps })
}
    render() {
    const {
        initProps
    } = this.state;

    if (!initProps) {
        return false;
    }


    return (
        <DevicesList {...initProps} {...this.props} />
    );
}

设备列表：

            <List {...this.props}
            perPage={10}
            filters={<DeviceSearchFilter />}
            actions={this.props.listactions}
            bulkActionButtons={<DeviceBulkActions />} filterDefaultValues={
                {
                    id: 1,
                    unlinked: this.props.unlinked,
                    profileId: this.props.profileId
                }}>

然后我在 LinkAction（模态对话框）中有相同的 initProps

在我的数据提供者中，我已将两种资源映射到相同的 api，因此只需添加一个过滤器来显示所有 vs 显示特定于 profileId

这两个资源似乎在冲突，即使它们在 redux 中是不同的资源，假设这是由于 url 路由，基本上我想我需要在模式中不绑定到 url. 谢谢

补充一下，我意识到我可以通过手动调用 dataProvider 并分别处理它们（例如演示仪表板）来实现这一点，但我想获得 'magic' 过滤器、分页等的好处。

Answer 1

The two resources seem to be clashing even though they are different resources in redux, assuming this is due to the url routing, essentially I suppose I need the in the modal to not be tied to the url.

你说得对。 List 组件确实与 url 紧密耦合，因此不支持在同一页面中包含两个组件（请参阅 https://github.com/marmelab/react-admin/issues/2903）。

我们还没有针对这些情况的答案，您现在必须实现自己的列表组件。

一个页面上的两个不同的列表组件

Two different List components on a single page

react-admin