如何将Django服务器变量传递给React jsx?

时间:2018-01-03 11:44:00

标签: javascript django reactjs webpack

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

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放入<script>部分的head标记,例如here

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

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

有没有办法将这些上下文变量传递给JSX文件?

1 个答案:

答案 0 :(得分:1)

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

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

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

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