2016-08-11 94 views
0

我將一個組件反射到React代碼。將Node.js數據傳遞給React

此前我正在用Jade編譯它,並將來自Jade全局的文本直接傳遞給HTML。事情是這樣的:

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

和玉我會:

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

現在我與之反應這樣做,我不知道如何將數據傳遞到它?

如果我做const text = require('./texts.json');的反應文件我得到一個錯誤的內部...

如何從節點傳遞數據以同樣的方式作出反應,因爲我有玉沒有?它只能在客戶端通過Ajax實現嗎?

+0

你可以使用' json-loader' https://github.com/webpack/json-loader,但也許你的問題是關於表達? –

+0

@Daniel_L在這種情況下,所有語言的整個json文件都將通過JavaScript加載到客戶端上嗎?我只想添加正確的翻譯字詞服務器端以減少客戶端加載的數據。 – Rikard

+0

我舉了一個例子,我可以在反應將要掛載的元素中添加一個帶有json字符串的'data-text'屬性......但不知道是否有另一種更乾淨的方法。 – Rikard

回答

1

好吧,在這個問題我去爲我找到了答案,因此讓downvotes ...

最後我通過我的文字信息,將收到我的陣營組成我的DOM元素。所以在玉我所做的:

- 
    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)) 

和文件在我安裝的組件:

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

,並通過最後的陣營組件我做:

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