如何将Django模板变量插入React脚本？

小编典典

如何将Django模板变量插入React脚本？

reactjs

我正在将Django Rest Framework与React.js一起使用。我的页面使用如下所示的api显示了一个用户的个人资料：

http://localhost:8000/api/profile/[pk]

我想动态地为react ajax请求设置URL以包括正确的pk，以便它从服务器请求正确的用户信息。

我可以使用诸如window.location.href之类的函数并从末尾弹出数字，但是有没有办法通过直接从服务器传递pk来执行此操作，即使用模板变量吗？

阅读 296

2020-07-22

共1个答案

小编典典

渲染组件时，应将pk作为道具传递。

<script>
React.render(React.createElement(Profile, {
    userId: "{{ userId }}", 
    urlPrefix: "/api/profile/" 
}), element);
</script>

更好的替代方法可能是只获取用户，然后渲染组件。例如，对于超级代理：

superagent.get('/api/profile/{{ userId }}', function(res){
    React.render(React.createElement(Profile, 
        {user: res.body}
    ), element);
});

使用browserify，您可以在脚本标签中包含数据，然后在代码中使用这些数据：

<script>var _appData = {userId: "{{ userId }}"};</script>

或使用-r标志（.require()在api中）导出模块。

# sh
browserify -r react -r src/profile.js:profile.js

// js
b.require('react').require('src/profile.js', {expose: 'profile.js'});

然后在常规脚本标签中使用模块

<script>
var React = require('react');
var Profile = require('profile.js');

React.render(React.createElement(Profile, {
    userId: "{{ userId }}", 
    urlPrefix: "/api/profile/" 
}), element);
</script>

2020-07-22