javascript - 如何将 Django 服务器变量传递到 React jsx 中?

标签 javascript django reactjs webpack

我有一个 Django View ,它传递模型查询集和字符串变量 ( 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 放入 <script>标签 head部分,例如here

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

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

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

最佳答案

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

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

您还可以决定仅在 <script> 中创建一个变量部分如下。

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

关于javascript - 如何将 Django 服务器变量传递到 React jsx 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48076724/

相关文章:

jquery - 带有图像和表单的下拉菜单

html - Vim 和 NeoVim 无法检测 Django HTML 文件类型

javascript - 如何将实例变量从 React 组件传递给它的 HOC?

javascript - 如何在不在 ReactJS 中重新渲染整个树的情况下渲染树组件的叶组件

reactjs - 如何使用 Flow 强制执行缺失的 prop 类型

javascript - 在 Javascript 中创建动态选择对象

javascript - 打印网页的一部分不适用于 css 更改

python - Django:模板和遍历字典

javascript - 提前两个月停止吗?

javascript - 使用 hapi 从 NodeJS 服务器下载文件