react:如何传入REST API的URL
开始学习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 Store/Actions中，我只会引用CONFIG.some_url。
这是正确的做法吗？或者有没有更好的方法使这些信息对我的react组件可用。
-编辑
使用webpack转换jsx文件，并使用django-webpack-loader集成所有内容。这意味着在jsx加载到顶部之前，django模板已经完全呈现。
因此，模板标记不能在jsx文件中运行。
回答 3
Stack Overflow用户
发布于 2017-11-29 23:47:23
即使你正在使用django-django loader(我也是)，你仍然可以将道具传递给你的React应用程序。你可以这样做：
1)解析您view.py中的绝对后台url：
def get_context_data(self, **kwargs):
context['APIROOT_URL'] = reverse('api-root', request=self.request)
return context2)将上下文prop传递给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__Stack Overflow用户
发布于 2016-09-01 16:06:38
将其作为道具传递：
<MyComponent src={% url %} />Stack Overflow用户
发布于 2016-09-01 18:16:45
在你的webpack配置中添加以下插件：
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.environ),
}
})
],运行webpack命令，如下所示：-
environ=local webpack 或
environ=production webpack -p //for production创建一个常量文件，其中保存一个函数，该函数根据上面设置的环境变量(local、dev、production)返回API urls。
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();使用ajax/fetch/axios将其导入componentDidMount()调用
import {url} from ../constants
componentDidMount(){
//api call
}如果你正在使用django并且一起反应，我强烈建议你看一次django-webpack-loader
https://stackoverflow.com/questions/39265648
复制相似问题
腾讯云开发者
