我不确定如何从中获取值
<FormattedMessage {...messages.placeholderIntlText} />
转换为占位符格式，如输入：
<input placeholder={<FormattedMessage {...messages.placeholderIntlText} />} />
因为它会在实际占位符中返回 [Object object]。有没有办法获得实际的正确值？
React-Intl 如何在输入占位符中使用 FormattedMessage
IT技术
reactjs
react-intl
react-starter-kit
2021-04-19 23:44:31
6个回答
中的<Formatted... />React 组件react-intl旨在用于渲染场景，而不是用于占位符、替代文本等。它们呈现 HTML，而不是纯文本，这在您的场景中没有用。
相反，出于完全相同的原因react-intl提供较低级别的 API。渲染组件本身在幕后使用此 API 将值格式化为 HTML。您的方案可能需要您使用较低级别的formatMessage(...)API。
您应该intl使用injectIntlHOC将对象注入到您的组件中，然后通过 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 功能，因此请根据您的设置进行调整。
- 您可以使用HoC 的
intlpropsinjectIntl - 您还可以提供功能作为子组件：
<FormattedMessage {...messages.placeholderIntlText}>
{(msg) => (<input placeholder={msg} />)}
</FormattedMessage>
有关输入占位符的更多详细信息
<FormattedMessage id="yourid" defaultMessage="search">
{placeholder=>
<Input placeholder={placeholder}/>
}
</FormattedMessage>
现在是 2019 年 7 月，react-intl 3 beta 附带了一个useIntl钩子，以使这些类型的翻译更容易：
import React from 'react';
import {useIntl, FormattedDate} from 'react-intl';
const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => {
const intl = useIntl();
return (
<span title={intl.formatDate(date)}>
<FormattedDate value={date} />
</span>
);
};
export default FunctionComponent;
然后你可以制作自定义钩子来使用 API 提供的方法：
import { useIntl } from 'react-intl'
export function useFormatMessage(messageId) {
return useIntl().formatMessage({ id: messageId })
}
从 React 版本 >= 16.8 开始，您可以使用useIntl hook：
import React from 'react';
import { IntlProvider, useIntl } from 'react-intl';
const FunctionComponent = () => {
const intl = useIntl();
const lang = "en";
const messages = {
en: {
'placeholderMessageId': 'placeholder in english',
},
fr: {
'placeholderMessageId': 'placeholder en fançais',
}
}
return (
<IntlProvider locale = {lang} messages = { messages[lang] } >
<input placeholder = { intl.formatMessage({ id: 'placeholderMessageId' })}/>
</IntlProvider >
);
};
export default FunctionComponent;