Question

因此，我试图在一个屏幕上基本上包含两个列表，我有一个向导，并且在此步骤中，我正在链接实体，例如将用户添加到个人资料中

我以Use <List /> on React-Admin dashboard为起点，然后为实体指定了不同的名称，但仍然不知道该怎么做。基本上，模式不应该绑定到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,
}

在customRoutes中：

    <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} />
    );
}

DevicesList：

            <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

在我的dataprovider中，我将这两种资源都映射到了同一个api，因此只需添加一个过滤器即可显示所有profile ID特定的vs。

即使这两个资源在redux中是不同的资源，它们似乎也发生了冲突，假设这是由于url路由引起的，从本质上讲，我想我需要将模式中的not绑定到url。谢谢

仅需补充一点，我意识到我可以通过手动调用dataProvider并分别处理它们（例如演示仪表板）来实现此目的，但想获得过滤器，分页等的“神奇”好处。

Answer 1

即使这两个资源在redux中是不同的资源，它们似乎也发生了冲突，假设这是由于url路由引起的，从本质上讲，我想我需要将模式中的not绑定到url。

您是正确的。 List组件确实与URL紧密耦合，因此不支持在同一个页面中包含两个（请参见https://github.com/marmelab/react-admin/issues/2903）。

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

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

1 个答案: