如何将 Django 服务器变量传递给 React jsx？答案

【问题标题】：How to pass Django server variable into React jsx?如何将 Django 服务器变量传递给 React jsx？
【发布时间】：2018-06-13 02:08:20
【问题描述】：

我有一个 Django 视图，它传递一个模型查询集和一个字符串变量 (order)

class RestaurantListView(generic.ListView):
    model = Restaurant
    context_object_name = 'restaurants'
    template_name = 'routeyourfood/restodetails.html'
    paginate_by = 4

    @method_decorator(require_GET)
    def dispatch(self, request, *args, **kwargs):
        return super(RestaurantListView, self).dispatch(request, *args, **kwargs)

    def get_queryset(self, **kwargs):
        self.pids = self.request.session['place_ids']
        self.order = self.kwargs['order']

        self.ordering_dict = {
            'rating-asc': 'rating',
            'rating-desc': '-rating',
            'name-asc': 'name',
            'name-desc': '-name',
            'distance-asc': 'distance_from_route',
            'distance-desc': '-distance_from_route'
        }

        if self.order == 'default':
            return Restaurant.objects.filter(place_id__in=self.pids)
        return Restaurant.objects.filter(place_id__in=self.pids).order_by(self.ordering_dict[self.order])

    def get_context_data(self, **kwargs):
        context = super(RestaurantListView, self).get_context_data(**kwargs)
        context['order'] = self.kwargs['order']
        return context

我正在尝试在我的前端实现ReactJS。

目前，我的模板restodetails.html 只有几个CSS 标签，没有JS 标签。

我只使用我传递的模板变量来构建整个页面。

但我不知道如何将 React 集成到其中。

我得到的一种方法是将 React 放入 head 部分的 <script> 标记中，例如 here。

但我将我的 React 代码保存在 Django 静态文件夹中的单独 JSX 文件中，我使用 Webpack 进行捆绑。

我也不喜欢将 JavaScript 放入模板的想法。

有没有办法将这些上下文变量传递到 JSX 文件中？

【问题讨论】：

标签： javascript django reactjs webpack

【解决方案1】：

据我所知，没有直接的方法可以将上下文变量发送到 JSX 文件中。

您可以做的是创建一个 API 使信息可用，并让 React 执行 Ajax 调用以获取信息。

您也可以决定只在<script> 部分中创建一个变量，如下所示。

 <script>
 var context_data = <<context data here>>;
 </script>

【讨论】：

谢谢。我也在考虑创建一个响应来自 React 的 AJAX 调用的 API 视图，但我不想创建一个全新的视图。考虑将现有的RestaurantListView 与 React 前端集成。但无论如何，我想我可能只是保持代码原样。对我来说，React 在这里似乎不是很有用。
我相信您应该始终尽量避免使用额外的库。如果 React 可以为您提供您真正想在您的网站上使用的额外选项，我建议您使用它。如果一个简单的ListView 可以达到同样的效果，那就去吧。
ListView 已经足够了，但是我现在正在学习 ReactJS，我想尽可能多地以不同的方式使用它。