作出反應，國際如何使用FormattedMessage輸入佔位符

我不確定如何從作出反應，國際如何使用FormattedMessage輸入佔位符

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

得到的值成一個佔位符格式像輸入：

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

，因爲它會返回[對象對象]在實際的佔位符中。有沒有辦法獲得實際的正確值？

來源

2016-09-22 Bryan

intl和injection從我這裏工作：http://stackoverflow.com/questions/33441524/how-to-use-formattedmessage-inside-an-option-tag-in-react-0-14 – Bryan

的<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此功能，所以要根據您的設置調整。

來源

2016-09-28 16:45:09 lsoliveira

您正試圖將名爲FormattedMessage的React組件渲染爲預期爲字符串的佔位符標記。

您應該改爲創建一個名爲FormattedMessage的函數，該函數將字符串返回到佔位符中。

function FormattedMessage(props) { 
    ... 
} 

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

來源

2016-09-22 07:56:23 Lottamus

Bryan可能是詢問有關react-intl，請參閱http://stackoverflow.com/questions/35186297/how-to-retrieve-a-string-in-reactintl-2-0-without-using-formattedmessage –

您可以使用intl道具從injectIntl特別
您還可以提供的功能子組件：

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

來源

2017-08-12 00:08:37 langpavel

這一個更容易應用 – Shalkam

@Shalkam不，它不是。這一個使用不需要的標籤來清除源代碼。 –

@KeremBaydoğan我寫下了兩種可能性。取決於案件。如果您正在渲染DOM元素，並且您不想將其包裝在中，則應該使用第二個示例。 – langpavel

-1

像這樣：

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

來源

2017-11-21 11:10:38

在我的案例我在一個文件中有整個應用程序，所以使用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 /> 
    } 
}

來源

2017-12-30 17:10:02 aksu

基礎上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收集消息進行翻譯。

來源

2018-01-19 13:34:30 gazdagergo

作出反應，國際如何使用FormattedMessage輸入佔位符

回答

相關問題