Come recuperare una stringa in ReactIntl ​​2.0 senza utilizzare FormattedMessage

Question

Correggetemi se ho torto, FormattedMessage in ReactIntl ​​restituisce una stringa racchiusa da tag span. In ReactIntl ​​1.2, abbiamo la possibilità di utilizzare this.getIntlMessage('key') per ottenere solo la parte di stringa.

Ecco la mia domanda: Esiste un equivalente in ReactIntl ​​2.0? Sono consapevole del fatto che la stringa può essere ottenuto utilizzando il modello Funzione-As-Bambino in FormattedMessage come

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

Tuttavia, si scombina il 'ref' nel mio componente e non posso accedere al componente utilizzando this.refs.mycomponent altro.

Answer 1

Ok, c'è un lavoro da fare per quello. Posso aggiungere ReactIntl ​​ come il contesto nel componente in questo modo:

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

Poi, quando si cerca di recuperare la stringa del messaggio e utilizzarlo, per esempio in un segnaposto, posso fare questo.

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

Answer 2

È possibile restituire facilmente la stringa utilizzando l'oggetto intl fornito da react-intl.

questo è il modo in cui si utilizza l'oggetto intl all'interno della classe di risposta in un modo molto più semplice.

nota: Render Component (componente principale) deve andare a capo con 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 
} 

Definendo contextTypes che vi permetterà di utilizzare l'oggetto Intl, che è un tipo di contesto prop. Vedi reagire contesto per maggiori dettagli.

Answer 3

C'è un problema migliore per risolvere placeholder.

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