条件付きレンダリング：コンポーネント

Question

をレンダリングするための小道具と定数を組み合わせた、私は次のコードを持っている：

const ContactInfo = ({ language }) => { 
    const engl = { 
    yes: 'yes', 
    }; 
    const fren = { 
    yes: 'oui', 
    }; 
    let text = null; 
    if (language === 'engl') { 
     text = <Text> {engl.ads} </Text>; 
    } else { 
     text = <Text> {fren.ads} </Text>; 
    } 

    return (
     {text} 
    ) 
} 

「言語」の小道具は「ENGL」または「fren」のいずれかとすることができるが。 これはうまく動作しますが、しかし、私がやりたいことは、このようなものです：だからではなく、その後

return (
    <Text> {{language}.ads} 
) 

かの条件を使用して、私は事前に定義されたとし、そのアクセスと同じであるどんな言語にレンダリングしたいですオブジェクト。

私の目標は、自分のコードの行を減らすことです。これは可能ですか？

さらに、多言語アプリケーション（サーバー側以外）を扱う堅牢な方法はありますか？

Answer 1

ルックアップテーブルとして機能する1つのオブジェクトに2つ（またはそれ以上）のオブジェクトをラップし、関連するキーにアクセスできます。ここで

が小さい実行している例です。

：ところで

const titles = { 
 
    engl: { 
 
    yes: 'yes' 
 
    }, 
 
    fren: { 
 
    yes: 'oui' 
 
    } 
 
} 
 

 

 
const App = ({ language }) => (
 
    <div> 
 
    {titles[language].yes} 
 
    </div> 
 
); 
 

 
ReactDOM.render(<App language="fren" />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

、これとはるかを管理するのに役立ちますヤフーreact-intlによって大きなプロジェクトがあります

React appsを国際化する。このライブラリは、 のReactコンポーネントと、日付、数値、および文字列の書式設定API（ 複数形変換および処理の翻訳を含む）を提供します。