Как интегрировать компоненты админки React в какое-нибудь приложение с произвольной реакцией?

React admin - отличный инструмент, и я хочу интегрировать его части, например Представления списка в некоторых приложениях для реагирования, которые не являются приложениями администратора для реагирования на корневом уровне.

Я создал функциональный компонент и просто вернул админскую оболочку реакции (пришлось добавить ее, потому что я не нашел способа зарегистрировать dataProvider) с одним ресурсом:

return(
  <Admin dataProvider={resolvedDataProvider}>
    <Resource name="nameOfGraphQLQuery" list={SomeList} />
  </Admin>
)

При рендеринге компонента отображается сообщение «Не найден»: либо вы ввели неправильный URL-адрес, либо перешли по неверной ссылке. Я предполагаю, что это связано с тем, что реагирующий администратор отображает представления на основе путей URL-адресов.

Можно ли отделить рендеринг ресурса от URL-адреса?

В идеале я бы просто повторно использовал компонент SomeList, зарегистрировал поставщика данных и пропустил Admin и Resource.


react-admin graphql hasura
person Scholle    schedule 18.04.2021    source источник
comment
'Компонент <Admin> заботится об определении хранилища (если вы не предоставите его, как показано выше), настройке контекстов перевода и аутентификации и начальной загрузке маршрутизатора. Если вам нужно переопределить любой из этих параметров, вы можете использовать свой собственный компонент вместо <Admin>. ' - marmelab.com/react-admin/   -  person xadm    schedule 22.04.2021

Ответы (2)


arrow_upward
2
arrow_downward

Согласно документации React-admin, включая <Admin> и <Resource> (Ссылка на документацию) не является обязательным.

Тег <Admin> - это удобный способ быстро запустить и запустить приложение response-admin.

То, что вы, вероятно, ищете, идет по маршруту Пользовательское приложение. Эта ссылка четко указывает, как перейти вокруг компонента <Admin>.

const App = () => (
    <Provider
        store={createAdminStore({
            authProvider,
            dataProvider,
            history,
        })}
    >
       <AuthContext.Provider value={authProvider}>
       <DataProviderContext.Provider value={dataProvider}>
       </DataProviderContext.Provider>
       </AuthContext.Provider>
    </Provider>
);

export default withContext(
   {
       authProvider: PropTypes.object,
   },
   () => ({ authProvider })
)(App);

Обратите внимание, что в этом примере по-прежнему используется <Resource>, потому что этот компонент лениво инициализирует хранилище для данных ресурса.

Если вы собираетесь использовать компоненты React-Admin, то это, похоже, правильный путь.

Также следует отметить тот факт, что React-Admin по своей сути тесно связан с пользовательским интерфейсом материала. Таким образом, вы определенно можете использовать Material UI.

Например: вы можете использовать компонент List. Они просты в использовании и могут быть очень легко подключены к существующему реагирующему приложению. Документация также великолепна и содержит множество примеров CodeSandBox.

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

Как человек, который работал над аналогичными направлениями в корпоративном проекте моей организации. Это оказалось полезным, потому что дало нам возможность более легко подключаться и играть вместо того, чтобы следовать жесткости, которую обеспечивает React-Admin.

person Anirudh    schedule 23.04.2021

arrow_upward
0
arrow_downward

Вы можете попробовать заключить свой ресурс в <DataProviderContext.Provider value={dataProvider}> на https://marmelab.com/react-admin/CustomApp.html

person DoctorAgon    schedule 22.04.2021