स्वरूपित संदेश

Question

का उपयोग किये बिना ReactIntl ​​2.0 में एक स्ट्रिंग को पुनर्प्राप्त करने के लिए कैसे करें यदि मैं गलत हूं, तो कृपया मुझे सही करें, ReactIntl ​​में स्वरूपित संदेश स्पैन टैग द्वारा लिपटे एक स्ट्रिंग देता है। ReactIntl ​​1.2 में, हमारे पास केवल स्ट्रिंग भाग प्राप्त करने के लिए this.getIntlMessage('key') का उपयोग करने का विकल्प है।

यहां मेरा प्रश्न है: क्या ReactIntl ​​2.0 में इसके बराबर है? मुझे पता है कि स्ट्रिंग के रूप में

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

हालांकि FormattedMessage में समारोह-एज-बाल पैटर्न का उपयोग करके प्राप्त किया जा सकता है, यह मेरी घटक में 'रेफरी' को खराब करता है और मैं का उपयोग कर घटक को एक्सेस नहीं कर सकता this.refs.mycomponent और भी।

Answer 1

ठीक है, इसके लिए एक काम है। मैं इस तरह घटक में संदर्भ के रूप में जोड़ सकते हैं ReactIntl ​​: फिर

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

जब संदेश की स्ट्रिंग को पुनः प्राप्त करने और एक प्लेसहोल्डर में इसका इस्तेमाल करते हैं, उदाहरण के लिए करने की कोशिश कर, मैं यह कर सकता।

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

Answer 2

आप प्रतिक्रिया-इंटेल द्वारा प्रदान की गई इंटेल ऑब्जेक्ट का उपयोग करके आसानी से स्ट्रिंग वापस कर सकते हैं।

इस प्रकार आप प्रतिक्रिया वर्ग के अंदर इंट्ल ऑब्जेक्ट का उपयोग अधिक आसान तरीके से करते हैं।

ध्यान दें: प्रस्तुत घटक (मुख्य घटक) 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 
} 

के साथ रैप चाहिए contextTypes यह intl वस्तु है जो एक संदर्भ प्रकार प्रोप है का उपयोग करने में सक्षम करेगा परिभाषित करके। अधिक जानकारी के लिए प्रतिक्रिया संदर्भ देखें।

Answer 3

placeholder समस्या को हल करने के लिए बेहतर है।

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