小道具（またはグローバル変数）を取得

Question

私はすべてのコンポーネントが利用できるようにするために私のアプリにいくつかのグローバル変数を設定しようとしています。たとえば、「言語」プロパティと「ステータス」プロパティを各コンポーネントに渡したいとしましょう。このプロパティはページにレンダリングされず、代わりに各コンポーネントの小道具に追加されます。これは、各コンポーネントが適切なスタイルと言語をロードして出力するときにその変数を確認できるようになります。

ルータに小道具を追加するなどの簡単なことが望めましたが、何を試しても、小道具は私の子供のコンポーネントで「未定義」として戻ってきます（メインのlayoutWrapperコンポーネントのみが小道具を取得します）。これはこれまでの様子です：

//app.js 

var LayoutWrapper = React.createClass({ 
    render: function() { 
    return (
     <Layout status="available" /> 
    ); 
    } 
}); 

ReactDOM.render(
    <Router history={hashHistory}> 
    <Route path="/" language="en-gb" component={LayoutWrapper}> 
    <IndexRoute component={Index}></IndexRoute> 
    </Route> 
    </Router>, 
app); 

Answer 1

グローバルレベルの状態データを扱うときは、Fluxのような状態フレームワークを使用することをお勧めします。私はReduxを推奨しています。これは、ボイラープレートコードを削減して、接続されたコンポーネントにアプリケーション状態を簡単に渡すことができます（その後、これらのコンポーネントを状態の変更にサブスクライブする）。

「グローバル」小道具を作成する一貫した方法がないため、あなたがしていることは失敗します。変数contextを使用できますが、これは実稼働環境での使用には推奨されない不安定な機能です。それ以外の場合は、手動で親から子にあなたの小道具を明示的に渡す必要があります。