Что я делаю, так это после обслуживания статического контента (встроенное приложение реакции), в DRF API есть точки входа, у которых есть шаблон, задающий контекст сервера (если вы хотите установить любой) в объекте clientConfig,
Кроме того, вам потребуется создать отдельный сценарий «инициализатора» для каждой конечной точки с маршрутами реакции в нем, предоставляя ему правильный селектор, который вы упомянете в шаблонах Django.
URL:path('foobars', views.FooBarsView.as_view(), name='foobars')
Просмотр :
class FooBarsView(TemplateView):
template_name = 'foobars.html'
def get_context_data(self):
return {
"client_config": {}
}
Шаблон (foobars.html) :
{% load static from staticfiles %}
<head>
<link rel="stylesheet" href="{% static 'dist/css/foobars.css' %}"/>
</head>
<main class="foobars"></main>
<script type="text/javascript">
var clientConfig = {{ client_config|safe }};
</script>
<script type="text/javascript" src="{% static "dist/js/foobars.min.js" %}"></script>
Некоторые измененияв приложении React вы должны использовать селектор .foobars в методе render.
Инициализатор :
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Switch>
<Route name="index" exact path="/" component={FooBarComponent} />
</Switch>
</Router>
</Provider>,
document.querySelector(".foobars")
);