2016-02-03 23 views
6

私が間違っていれば私を修正してください、ReactIntl​​のFormattedMessageはspanタグでラップされた文字列を返します。 ReactIntl​​ 1.2では、this.getIntlMessage('key')を使用して文字列部分のみを取得するオプションがあります。FormattedMessageを使用せずにReactIntl​​ 2.0の文字列を取得する方法

ここに私の質問があります:それはReactIntl​​ 2.0に相当しますか?私は、文字列がしかし、それは私のコンポーネントで「参照」を台無しにし、私が使用してコンポーネントにアクセスすることができません

<FormattedMessage id="placeholder"> 
    {(formattedValue)=>(
     <MyComponent ref="mycomponent" placeholder={formattedValue}/> 
    )} 
</FormattedMessage> 

としてFormattedMessageで機能-AS-子パターンを使用することによって得られることを承知していますthis.refs.mycomponent

答えて

5

[OK]を、それのための回避策があります。メッセージの文字列を取得し、プレースホルダには、たとえば、それを使用しようとするとその後、私はこれを行うことができ

contextTypes: { 
    intl: React.PropTypes.object.isRequired, 
}, 

を:私はこのようなコンポーネントにコンテキストとしてReactIntl​​を追加することができます。

+2

答えは本当にあまり有益ではありません、詳細を追加することを検討してください –

8

react-intlが提供するintlオブジェクトを使用すると、簡単に文字列を返すことができます。

これは、より簡単に反応クラスの内部でintlオブジェクトを使用する方法です。

注:コンポーネント(主成分)が、それは、コンテキストタイプの小道具である国際オブジェクトを使用することができますcontextTypesを定義することによりIntlProvider

class MySubComponent extends React.Component{ 
    {/*....*/} 

    render(){ 
    return(
    <div> 
     <input type="text" placeholder = {this.context.intl.formatMessage({id:"your_id", defaultMessage: "your default message"})} 
    </div> 

    ) 
    } 
    } 
MySubComponent.contextTypes ={ 
intl:React.PropTypes.object.isRequired 
} 

で包む必要がありますレンダリング。詳細については、リアクションコンテキストを参照してください。

4

placeholder問題を解決する方が良いです。

<FormattedMessage ...messages.placeholderIntlText> 
    { 
    (msg) => <input type="text" placeholder = {msg} /> 
    } 
</FormattedMessage> 
関連する問題