リアクト-国際空港を私は入力のようなプレースホルダの形式に</p> <pre><code><FormattedMessage {...messages.placeholderIntlText} /> </code></pre> <p>から値を取得する方法がわからないよどのように入力プレースホルダ

Question

でFormattedMessageを使用するには：それは戻ってくるよう

<input placeholder={<FormattedMessage {...messages.placeholderIntlText} />} /> 

[オブジェクトオブジェクト]を実際のプレースホルダーに挿入します。実際の正しい値を得る方法はありますか？

Answer 1

<Formatted... />はあなたに有用ではない、プレーンテキスト、彼らは、HTMLをレンダリングするなど、シナリオのレンダリングに使用されることを意味しているとプレースホルダで使用されることを意味しないreact-intlに代替テキストをコンポーネントがないリアクトシナリオ。

代わりに、react-intlは、全く同じ理由でlower level APIを提供します。レンダリングコンポーネント自体は、フードの下でこのAPIを使用して値をHTMLにフォーマットします。ご使用のシナリオでは、下位レベルのformatMessage(...) APIを使用する必要があります。

HOCを使用してintlオブジェクトをコンポーネントに挿入し、APIを使用してメッセージをフォーマットするだけです。

例：

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

const ChildComponent = ({ intl }) => { 
    const placeholder = intl.formatMessage({id: 'messageId'}); 
    return(
    <input placeholder={placeholder} /> 
); 
} 

ChildComponent.propTypes = { 
    intl: intlShape.isRequired 
} 

export default injectIntl(ChildComponent); 

は、私はいくつかのES6がここます使っていることに注意してくださいので、あなたのセットアップに応じて適応してください。

Answer 2

FormattedMessageという名前のReactコンポーネントを、文字列が必要なプレースホルダタグにレンダリングしようとしています。

代わりに、プレースホルダに文字列を返すFormattedMessageという名前の関数を作成するだけです。

function FormattedMessage(props) { 
    ... 
} 

<input placeholder=`{$(FormattedMessage({...messages.placeholderIntlText})}` /> 

Answer 3

• あなたはinjectIntl HOCからintl小道具を使用することができます
• また、子コンポーネントとしての機能を提供することができます：このよう

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

Answer 4

：私の場合は

import React, {PropTypes} from 'react'; 
import { injectIntl, FormattedMessage } from 'react-intl'; 
  
/** 
* { 
* "hello": "Hello", 
* "world": "World" 
* } 
*/ 
  
// pure function 
const PureFunciton = injectIntl(({ intl }) => { 
return (
    <div> 
    <p>{intl.formatMessage({ id: 'hello' })}</p> 
    <p><FormattedMessage id="world" /></p> 
    </div> 
) 
}); 
  
// class Component 
class componentName extends Component { 
    handleStr =() => { 
    // return 'Hello'; 
    const { intl } = this.props; 
    return intl.formatMessage({ id: 'hello' }) 
    } 
    render() { 
    return (
     <div> 
     <p>{this.handleStr()}</p> 
     <p><FormattedMessage id="world" /></p> 
     </div> 
    ); 
    } 
} 
  
export default injectIntl(connect(componentName)); 

Answer 5

私は1つのファイルにアプリ全体を持っていたので、usin g exportは機能しません。これは通常のクラス構造を使用するため、必要に応じてReactの状態やその他の機能を使用できます。

class nameInputOrig extends React.Component { 
    render() { 
    const {formatMessage} = this.props.intl; 
    return (
     <input type="text" placeholder={formatMessage({id:"placeholderIntlText"})} /> 
    ); 
    } 
} 

const nameInput = injectIntl(nameInputOrig); 

作成された定数を使用して適用します。

翻訳可能なプレースホルダと入力ボックスの実装は次のようになります react intl wikiに基づいて

class App extends React.Component { 
    render() { 
     <nameInput /> 
    } 
} 

Answer 6

：

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

const messages = defineMessages({ 
    placeholder: { 
    id: 'myPlaceholderText', 
    defaultMessage: '{text} and static text', 
    }, 
}); 

const ComponentWithInput = ({ intl, placeholderText }) => { 
    return (
    <input 
     placeholder={ intl.formatMessage(messages.placeholder, { text: placeholderText }) } 
    /> 
); 
}; 

ComponentWithInput.propTypes = { 
    intl: intlShape.isRequired 
}; 

export default injectIntl(ComponentWithInput); 

とそれのuseage：

import ComponentWithInput from './component-with-input'; 
... 
render() { 
    <ComponentWithInput placeholderText="foo" /> 
} 
... 

id: 'myPlaceholderText',の部分は、翻訳のためにメッセージを収集できるようにするために必要です。