作出反应，国际如何使用FormattedMessage输入占位符

Question

我不确定如何从

<FormattedMessage {...messages.placeholderIntlText} /> 

得到的值成一个占位符格式像输入：

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

，因为它会返回[对象对象]在实际的占位符中。有没有办法获得实际的正确值？

Answer 1

的<Formatted... />作出反应react-intl组件意味着在渲染场景中使用，并不意味着占位符，替换文本等使用它们渲染HTML，而不是纯文本，这是没有用的你场景。

相反，react-intl提供了一个lower level API完全相同的原因。渲染组件本身使用这个API来将这些值格式化为HTML。您的场景可能需要您使用较低级别的formatMessage(...) API。

您应该使用injectIntl 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

• 您可以使用intl道具从injectIntl特别
• 您还可以提供的功能子组件：

<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

在我的案例我在一个文件中有整个应用程序，所以使用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); 

应用使用创建的常数：

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

Answer 6

基础上react intl wiki一个输入框与翻译占位符的执行将是这样的：

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); 

和它的用途：

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

id: 'myPlaceholderText',部分是必要的，以使babel-plugin-react-intl收集消息进行翻译。