2016-08-11 5 views
0

Ich korrigiere eine Komponente in React-Code.Übergeben von Node.js-Daten an React

Zuvor kompilierte ich es mit Jade und übergab den i18n Text von einem Jade global direkt an den HTML. Etwas wie folgt aus:

// in Node.js/Express 
const text = require('./assets/texts.json'); 
app.get('/route', (req, res) => { 
    render('page', text); 
}); 

und in Jade Ich hätte:

h3= text.en.title 
p= text.en.subtitle 

Jetzt mache ich das mit Reagieren und ich frage mich, wie die Daten in sie zu übergeben?

Wenn ich const text = require('./texts.json'); in der Datei reagiert ich eine Fehlermeldung erhalten ...

Wie man Daten von Knoten passieren in der gleichen Art und Weise zu reagieren, wie ich mit Jade tat? Ist es nur über Ajax auf der Client-Seite schon möglich?

+0

Sie nutzen könnten ' json-loader' https://github.com/webpack/json-loader, aber vielleicht geht es bei deiner Frage eher um Express? –

+0

@Daniel_L in diesem Fall würde die ganze JSON-Datei mit allen Sprachen per JavaScript auf den Client geladen werden oder? Ich möchte nur die korrekte übersetzte Wörter Serverseite hinzufügen, um die vom Klienten geladenen Daten zu reduzieren. – Rikard

+0

Ich denke, ich könnte ein 'data-text'-Attribut mit einem JSON-String in dem Element hinzufügen, in dem rect mount ... aber ich frage mich, ob es noch einen saubereren Weg gibt. – Rikard

Antwort

1

Ok, also immer in der Frage downvotes ich für die Antwort gehe ich gefunden ...

landete ich meine Textinformationen in meinem DOM-Element vorbei bis die meine React Komponente erhalten wird. So In Jade habe ich:

- 
    var words = ["calculate_price", "price_info", etc etc... ]; 
    var text = words.reduce(function(obj, word){ 
     return (obj[word] = lang[word], obj); 
    }, {}); 
#dialog_wrapper(data-text= JSON.stringify(text)) 

und in der Datei, wo ich die Komponente montieren:

const dialogWrapper = document.getElementById('dialog_wrapper'); 
const dialogText = JSON.parse(dialogWrapper.dataset.text); 
ReactDOM.render(<BookingDialog text={dialogText}/>, dialogWrapper); 

und zuletzt in der Komponente reagiere ich tat:

componentDidMount() { 
    console.log(this.props.text); // all here! 
} 
Verwandte Themen