Два разных компонента списка на одной странице - PullRequest
Новая
       6

Два разных компонента списка на одной странице

0 голосов
/ 15 февраля 2019

Итак, я пытаюсь создать два списка на одном экране, у меня есть мастер, и на этом этапе я связываю сущности, такие как добавление пользователей в профиль

Я использовал Использованиена панели управления React-Admin в качестве отправной точки, а затем дал объектам разные имена, но все еще не знает, как это сделать.По сути, модал не должен быть привязан к 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
                }}>

Тогда у меня те же initPropsв LinkAction (модальное диалоговое окно)

В моем поставщике данных я сопоставил оба ресурса с одним и тем же API-интерфейсом, поэтому один из них просто добавляет фильтр, чтобы показать все сопоставления, относящиеся к profileId

Два ресурсаКажется, что они конфликтуют, несмотря на то, что они представляют собой разные ресурсы в Redux, если предположить, что это связано с маршрутизацией URL-адреса. По сути, я предполагаю, что мне нужно, чтобы модал не был привязан к URL-адресу.Спасибо

Просто добавлю, я понимаю, что, вероятно, я мог бы достичь этого, просто вручную вызывая dataProvider и обрабатывая их по отдельности, такие как демонстрационная панель инструментов, но хотел получить «волшебные» преимущества фильтра, разбиения на страницы и т. Д.

1 Ответ

0 голосов
/ 24 февраля 2019

Кажется, что эти два ресурса конфликтуют, хотя они и являются разными ресурсами в редуксе, если предположить, что это связано с маршрутизацией URL, по сути, я предполагаю, что мне нужно, чтобы модал не был привязан к URL.

Вы правы в этом.Компонент List действительно тесно связан с URL-адресом, поэтому использование двух из них на одной странице не поддерживается (см. https://github.com/marmelab/react-admin/issues/2903).

. У нас пока нет ответа на эти вопросы, и вам придетсяреализовать свой собственный компонент List.

...