React 0.14のオプションタグ内でFormattedMessageを使用するには？

Question

私はアプリケーションをReact 0.12からReact 0.14に移行しようとしており、react-intl FormattedMessageオブジェクトを選択タグ内に配置したオプション要素に問題があります。 0.12を反応させ、私は翻訳されたオプションの要素を参照してくださいに

<select> 
<option value="value1"><FormattedMessage message={this.getIntlMessage('key1')}/></option> 
<option value="value2"><FormattedMessage message={this.getIntlMessage('key2')}/></option> 
</select> 

このコードは正常に動作します：ここで

はサンプルJSXコードです。

Only strings and numbers are supported as <option> children. 

私は今年の初めに起こった反応という点で、このチェンジにメッセージをトレースさ：

https://github.com/facebook/react/pull/3847/files

私はこの問題をどのように修正することができます

では、私はこのエラーを得た、0.14の反応します？国際化されたオプション要素を使用しようとする唯一の人にはなりませんか？

Answer 1

これは常に問題となっています。あなたのケースでは<span>要素が<option>要素内にある無効なDOM構造を自動的に受け入れるために、< 0.14が使用されました。ブラウザはDOM構造を修正し、Reactによって管理される仮想DOMを本物のものと同期させないようにします。既存のコンポーネントを再マウントするのではなく、既存のコンポーネントを再レンダリングしようとするまで、エラーは表示されません。 0.14を反応させるのためのサポートが付属します

react-intl V2.0.0は、あなたがあなたのFormatted*コンポーネントがレンダリング方法をカスタマイズする機能-AS-子パターンを使用することができます。 this issueの「機能別子サポート」の段落を参照してください。あなたのケースでは

、あなたはどうなる：

<FormattedMessage message={this.getIntlMessage('key1')}> 
    {(message) => <option value="value1">{message}</option>} 
</FormattedMessage> 
<FormattedMessage message={this.getIntlMessage('key2')}> 
    {(message) => <option value="value2">{message}</option>} 
</FormattedMessage> 

私は、現在の安定版、1.2.1でこれを達成する方法はないと思います。

Answer 2

@Alexandre Kirszenbergの答えに少しより良い代替として、それはコンポーネントにintlオブジェクトを注入し、直接formatMessage機能を使用することも可能ですが、

import { injectIntl, intlShape, defineMessages, FormattedMessage } from 'react-intl'; 

const AddressForm = ({ intl, street, number, postalCode, city, onChange }) => { 
    return (
    <form id="paymentAddress"> 
     // ... 
     <fieldset className="form-group"> 
     <label htmlFor="country"><FormattedMessage { ...messages.country } />:</label> 
     <div> 
      <select name="country"> 
      <option value="DE">{intl.formatMessage(messages.de)}</option> 
      <option value="UK">{intl.formatMessage(messages.uk)}</option> 
      <option value="CH">{intl.formatMessage(messages.ch)}</option> 
      </select> 
     </div> 
     </fieldset> 
    </form> 
); 
}; 

AddressForm.propTypes = { 
    intl: intlShape.isRequired, 
    // ... 
} 

Answer 3

私は（同じ問題を抱えていたし、injectIntl​​を経由して、それを解決しました）。助け

import React, {Component, PropTypes} from 'react'; 
import {defineMessages, injectIntl, intlShape} from 'react-intl'; 

const messages = defineMessages({ 
    firstoption: { 
     id: 'mycomponent.firstoption', 
     defaultMessage: 'Coffee', 
    }, 
    secondoption: { 
     id: 'mycomponent.secondoption', 
     defaultMessage: 'Tea', 
    } 
}); 

class MyComponent extends Component { 
    render() { 
     const {formatMessage} = this.props.intl; 

     return (
      <div> 
      <select> 
       <option value="value1">{formatMessage(messages.firstoption)}</option> 
       <option value="value2">{formatMessage(messages.secondoption)}</option> 
      </select> 
      </div> 
     ); 
    } 
} 

MyComponent = { 
    intl : intlShape.isRequired 
}; 

export default injectIntl(MyComponent) 

希望...

Answer 4

使用injectIntlはあなたにコンポーネントをラップする：あなたがしなければならないすべてはそのように、injectIntl​​機能を使用してコンポーネントをラップであることを意味し

This function is used to wrap a component and will inject the intl context object created by the IntlProvider as a prop on the wrapped component. Using the HOC factory function alleviates the need for context to be a part of the public API.

内部でAPIを使用したいので、formattedMessageなどのAPIを使用できます。 react-intl/wiki/API