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

Question

我正在使用Django Rest Framework和React.js.我的页面显示了一个用户的个人资料,使用这样的api:

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

我想动态设置react ajax请求的url以包含正确的pk,以便它从服务器请求正确的用户信息.

我可以使用像window.location.href这样的函数并从最后弹出数字,但有没有办法通过直接从服务器传递pk来实现这一点,即使用模板变量？

Answer 1

渲染组件时,应将pk作为prop传递.

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

更好的选择可能是获取用户,然后渲染组件.例如,与superagent:

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>