JSX引数の中にレンダリングコンポーネントを反応させよう

Question

私は、キーに基づいて正しい翻訳を返す翻訳システムを持っています。そして、このすべてのコンポーネントによって処理される翻訳：

import React from 'react'; 

const Translate = ({ ln }) => { 

    return <span>{language[ln]}</span> 
}; 

export default Translate; 

問題は、私は例えば内側にそれを使用しようとすることです： - 実行時に

<input type="text" placeholder=<Translate ln="text_input" /> /> 

問題は、コンポーネントが戻っていないということです私は<input />に挿入します。つまり、私のプレースホルダは常に[オブジェクトオブジェクト]になります。これを解決する方法はありますか？ placeholderにあなたがStringないObjectまたはStringcontains tagsことを渡す必要がありますので、あなたがplaceholderに渡すことはできません

Answer 1

は、コンポーネントに反応。、私はより良い分割Translateカップルの機能にこのケースでは、と思うTranslateコンポーネントにと同じようにそれを使用します

const translate = (key) => { 
    // Some code ... 
    return language[ln]; 
}; // returns string 

const Translate = ({ ln }) => { 
    return <span>{ translate(ln) }</span> 
}; // return React compoent 

<input 
    type="text" 
    placeholder={ translate('some key') } /> // pass string to placeholder 

Answer 2

なぜ文字列を最初に翻訳するのですか？私はこれが心配の良い分離ではないと思うし、翻訳者の再利用を減らします。

はちょうどあなたが例えば

<input type="text" placeholder={i18next.t('text')} /> 

のような翻訳のために i18nextのようなものを使用することができ

<input type="text" placeholder={t('text')} /> 

のようにそのための関数を使用します