Javascript 反应：如何为RESTAPI传递URL

开始学习react，但在互联网上找不到答案。也许我不知道该用什么术语

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

e、 g.django模板的内容如下

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

变量配置={
一些url:“{%url“我的api”%}”
}

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

然后，在我的React Stores/Actions中，我将只参考CONFIG.some\u url

这样做对吗？或者，是否有更好的方法将此信息提供给我的react组件

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

使用webpack传输jsx文件，并使用集成所有内容。这意味着django模板在jsx加载到顶部之前完全呈现。
因此，模板标记不能在jsx文件中运行。

将其作为道具传递：

<MyComponent src={% url %} />

---

将以下插件放入您的网页包配置中：-

  plugins: [
    new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify(process.env.environ),
    }
  })
  ],

按如下方式运行webpack命令：-

environ=local webpack 

或

创建一个常量文件，在其中保存一个返回API的函数 基于上述环境变量集的URL。（本地、开发、生产）

将其导入组件didmount（）中，并使用ajax/fetch/axios调用api

import {url} from ../constants 

componentDidMount(){
   //api call
}

---

如果您正在使用django和react，我强烈建议您立即查看一下

，即使您正在使用django webpack loader（我也是），您仍然可以向react应用程序传递道具。你可以这样做：

const apirootUrl = window.__APIROOT_URL__

1） 解析view.py中的绝对后端url：

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

2） 将上下文属性传递给html模板

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

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

---

忘了提到我正在使用webpack，django模板在jsx加载之前就已经完全呈现了。我会在我原来的帖子中添加更多细节。谢谢。我不完全清楚这种方法。常量文件实际上是django模板吗？我不清楚jsx文件在django端如何加载常量文件。你是否建议我在网页侧的js文件中硬编码路径？是的，不是硬编码，而是根据环境更改URL。您将创建一个constant.jsx文件并将其导入组件中，然后使用webpack编译项目。您的jsx组件将首先编译成一个js包文件。将该文件放在html中。现在清楚了吗？当我在django改变路径时会发生什么？我需要手动更新这个constant.jsx文件吗？我假设您的API将首先构建，对吗？这就是它应该工作的方式。如果django中有任何更改，只需更新constants.jsx中的base_url。此外，我建议您将前端和后端分开。在react上完全构建前端，在django rest上构建后端。将模板与reactjs结合起来可能会变得非常混乱。相信我，我在那里看到过：）这几乎就是我正在做的，尽管是以一种稍微有点条理的方式。谢谢您也可以使用

本地存储

而不是

窗口

。

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

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

const apirootUrl = window.__APIROOT_URL__