javascript - react : how to pass in URLs for REST APIs

Question

开始学习react，在网上找不到这个问题的答案。也许我不知道该使用什么术语。

我的后端是 django，我希望能够将 REST API 的 URL 传递到我的 React 前端。
我不想在 React 中对它们进行硬编码，因为它们已经在 django 中定义了。
对我来说，我想在 html 模板上呈现一个脚本标记，其中包含一个包含 URL 值的对象，这是有意义的。

例如django 模板会有类似的内容

<script type="text/javascript">
  var CONFIG = {
    some_url : '{% url "my-api" %}'
  }
</script>

(对于那些不熟悉 django 的人，该 {% url %} 标记会呈现类似/path/to/myapi 的 url)

然后在我的 React Stores/Actions 中我只引用 CONFIG.some_url。

这是正确的方法吗？或者有没有更好的方法让我的 react 组件可以使用这些信息。

------------编辑-----------------

使用 webpack 转译 jsx 文件并使用 django-webpack-loader整合一切。这意味着 django 模板在 jsx 加载到顶部之前已完全渲染。
因此，模板标签无法在 jsx 文件内运行。

Answer 1

即使你正在使用 django-webpack-loader(我也是)，你仍然可以将 props 传递给你的 React 应用程序。您可以像这样继续:

1) 解析 view.py 中的绝对后端 url:

def get_context_data(self, **kwargs):
    context['APIROOT_URL'] = reverse('api-root', request=self.request)
    return context

2) 将 context 属性传递给 html 模板

    <div id="react-app"></div>

<script>
    window.__APIROOT_URL__= '{{ APIROOT_URL }}';
    window.react_mount = document.getElementById('react-app');
</script>
{% render_bundle 'main' %}

3)最后在您的应用程序中，获取如下属性:

const apirootUrl = window.__APIROOT_URL__