2016-08-11 5 views
0

Reactコードにコンポーネントをリファイアします。Node.jsデータをReactに渡す

以前は翡翠でそれを編集していましたが、ぼんやりしたグローバルのテキストをHTMLに直接送ってi18nというテキストを渡していました。このような何か:

// 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! 
} 
関連する問題