react:如何为REST api传入url

react: how to pass in URLs for REST APIs

本文关键字：api 传入 url REST react      更新时间：2023-09-26

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

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

。django模板应该是这样的

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

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

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

这样做对吗?或者有没有更好的方法让这些信息对我的反应组分可用。

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

使用webpack来编译jsx文件，并使用django-webpack-loader来集成所有文件。这意味着django模板会在JSX加载之前被完全渲染。
因此，模板标记不能在jsx文件中运行。

即使你正在使用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)传递上下文道具给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__

将其作为props传递:

<MyComponent src={% url %} />

把以下插件放到你的webpack配置中:-

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

执行webpack命令:-

environ=local webpack

或

 environ=production webpack -p //for production

创建一个常量文件，其中保存一个返回API的函数基于上述环境变量的url (local,dev,production)。

const api_url=function(){
  let api_url=//production api url
  if(process.env.NODE_ENV == 'local'){
    //local api url
  }
  else if(process.env.NODE_ENV == 'development'){
    //dev api url
  }
  return api_url;
}
export const url= api_url();

在你的componentDidMount()中导入它，使用ajax/fetch/axios调用api 

import {url} from ../constants 
componentDidMount(){
   //api call
}

如果你同时使用django和react，我强烈建议你查看一下django-webpack-loader

相关文章：