Jak odzyskać ciąg znaków w ReactIntl ​​2.0 bez korzystania z wiadomości sformatowanej

Question

Proszę poprawić mnie, jeśli się mylę, FormattedMessage w ReactIntl ​​zwraca ciąg zawinięty przez znaczniki span. W ReactIntl ​​1.2 mamy opcję użycia this.getIntlMessage('key'), aby uzyskać tylko część napisową.

Oto moje pytanie: czy istnieje odpowiednik tego w ReactIntl ​​2.0? Zdaję sobie sprawę, że ciąg można uzyskać za pomocą wzoru Function-As-dziecko w FormattedMessage jak

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

jednak, bałagan w „ref” w moim składnika i nie mogę uzyskać dostęp do elementu za pomocą this.refs.mycomponent więcej.

Answer 1

OK, jest do tego zajęcie. Mogę dodać ReactIntl ​​ jako kontekst w składniku tak:

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

Potem, gdy próbuje odebrać ciąg wiadomości i korzystać z niego, na przykład w zastępczym, mogę to zrobić.

<MyComponent ref="mycomponent" placeholder={this.context.intl.messages.placeholder}/> 

Answer 2

Możesz łatwo zwrócić ciąg za pomocą obiektu intl dostarczonego przez react-intl.

to sposób korzystania z obiektu Intl wewnątrz klasy reagowania w znacznie łatwiejszy sposób.

uwaga: Render składnik (główny składnik) należy owinąć 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 
} 

Definiując contextTypes Pozwoli to używać intl przedmiot, który jest rodzajem kontekst prop. Zobacz kontekst reakcji, aby uzyskać więcej szczegółów.

Answer 3

Istnieje lepszy problem z rozwiązaniem problemu placeholder.

<FormattedMessage ...messages.placeholderIntlText> 
    { 
    (msg) => <input type="text" placeholder = {msg} /> 
    } 
</FormattedMessage>