Использование React в существующем проекте Django

У меня есть существующий проект Django. Это сайт, который отображает карту с листочками. Маркеры и все остальное загружается динамически из django. Теперь я хочу улучшить это с помощью React. В том смысле, что когда вы нажимаете на маркер на карте, react будет отображать на основе marker_id конкретный маркер-детали в боковой панели или что-то в этом роде. Я не уверен, как это сделать. В шаблоне django у меня есть событие onclick для получения подробной информации о маркере:

                    marker.uri = `/map/api/marker_details/?marker_id=${marker.marker_id}&marker_type=${marker.marker_type}`
                    marker.on('click', function (e) {

                        jQuery.get(this.uri);

                    });

Поскольку все это сделано в шаблоне django, а не в React, результат, вероятно, недоступен через react для отображения деталей. Должен ли я реализовать карту с маркером и всем остальным в React, чтобы затем иметь возможность выводить детали через API? Что я упускаю?

Если я правильно понимаю, о чем вы спрашиваете, может сработать то, что вы просто отправите marker_id в ваш jQuery. Затем вы можете получить весь объект Marker со всеми его деталями и отправить его обратно в jQuery, где вы сможете разобрать его на части, как пожелаете.

from django.http import JsonResponse

def some_view(request, marker_id):
    data = list(Marker.objects.filter(marker_id=marker_id).values())  # wrap in list(), because QuerySet is not JSON serializable
    return JsonResponse(data, safe=False)  # or JsonResponse({'data': data})

Теперь, вместо того чтобы просто передавать в uri, вам нужно обработать то, что он получает, что вы можете сделать с помощью:

marker.uri = `/map/api/marker_details/?marker_id=${marker.marker_id}`

marker.on('click', function (e) {
    jQuery.get(this.uri, function(data) {
        alert( "Data Loaded: " + data );
    });
});

Конечно, здесь это просто оповещение с данными, которые вы получаете, но я думаю, что вы уже разобрались с остальным.

В итоге я использовал django-unicorn. Там вы можете вызвать бэкенд из вашего шаблона:

c.on('click', function (e) {
                            Unicorn.call('sidebar','get_details',this.marker_id,this.marker_type)
                        });

В представлении вы можете сделать запрос и вернуть результат в шаблон :

class SidebarView(UnicornView):
    name = ""

    def get_details(self,id_string,marker_type):
        print(id_string)
Вернуться на верх