Wie füge ich eine Django-Vorlagenvariable in ein React-Skript ein?

Question

Ich verwende Django Rest Framework mit React.js. Meine Seite zeigt ein Benutzer-Profil, ein api wie folgt aus:

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

ich die URL wollen für die dynamisch eingestellt reagieren Ajax-Anforderung die richtige Stück zu schließen, so dass es die Informationen des korrekten Benutzer fordert von der Server.

Ich könnte eine Funktion wie window.location.href verwenden und die Zahl vom Ende abholen, aber gibt es eine Möglichkeit, dies zu tun, indem Sie das pk direkt vom Server übergeben, d.

Answer 1

Wenn Sie die Komponente rendern, sollten Sie den PK als Prop übergeben.

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

Eine bessere Alternative könnte sein, einfach den Benutzer zu holen und dann die Komponente zu rendern. Zum Beispiel mit Superagenten:

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

---

Mit browserify können Sie entweder enthalten Daten in einem Skript-Tag, und verwenden Sie diese in Ihrem Code:

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

Oder Export-Module mit der -r Flagge (.require() in der API).

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

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

Und dann verwenden, um die Module in regelmäßigen Script-Tags

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

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