Come inserire una variabile modello Django in uno script React?

Question

Sto usando Django Rest Framework con React.js. La mia pagina mostra il profilo di un utente, utilizzando un'API come questo:

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

voglio impostare dinamicamente l'URL per il reagire richiesta AJAX per includere la corretta pk, in modo che richiede informazioni e la correttezza dell'utente dal server.

Potrei usare una funzione come window.location.href e inserire il numero dalla fine, ma c'è un modo per farlo passando il pk direttamente dal server, cioè usando una variabile di template?

Answer 1

Quando si esegue il rendering del componente, è necessario passare il pk come sostegno.

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

Un'alternativa migliore potrebbe essere semplicemente recuperare l'utente e quindi eseguire il rendering del componente. Ad esempio, con superagent:

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

---

Con browserify, è possibile includere i dati in un tag script, e l'uso che nel codice:

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

o esportare moduli usando la bandiera -r (.require() nell'api).

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

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

e quindi utilizzare i moduli in normali tag script

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

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