在现有 Django 项目中使用 React

Question

我有一个现有的 Django 项目。它是一个显示带有传单的地图的网站。 标记和所有内容都是从 django 动态加载的。 现在我想用 React 来增强这一点。从某种意义上说，当您单击地图上的标记时，React 将根据标记 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 渲染详细信息？我错过了什么？

Answer 1

如果我正确理解你的要求，可能的方法就是在你的 jQuery 中发送

marker_id

。 然后，您可以获得整个

Marker

对象及其所有详细信息，并将其发送回 jQuery，您可以在其中以任何您希望的方式将其拆开。

来自https://stackoverflow.com/a/37839240/10951070：

from django.http import JsonResponse

def some_view(request, marker_id):
    data = list(SomeModel.objects.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 );
    });
});

当然，这里只是对您返回的数据进行警报，但我认为您已经解决了其余问题。