我不确定如何从中获取值
<FormattedMessage {...messages.placeholderIntlText} />
成占位符格式,如输入:
<input placeholder={<FormattedMessage {...messages.placeholderIntlText} />} />
因为它将在实际占位符中返回 [Object object]。有没有办法获得实际的正确值?
我不确定如何从中获取值
<FormattedMessage {...messages.placeholderIntlText} />
成占位符格式,如输入:
<input placeholder={<FormattedMessage {...messages.placeholderIntlText} />} />
因为它将在实际占位符中返回 [Object object]。有没有办法获得实际的正确值?
中的<Formatted... />
React 组件react-intl
旨在用于渲染场景,而不是用于占位符、替代文本等。它们渲染 HTML,而不是纯文本,这在您的场景中没有用处。
相反,出于同样的原因,react-intl
提供了一个较低级别的 API 。渲染组件本身在后台使用此 API 将值格式化为 HTML。您的场景可能需要您使用较低级别的formatMessage(...)
API。
您应该intl
使用injectIntl
HOC 将对象注入到您的组件中,然后通过 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 功能,因此请根据您的设置进行调整。
intl
来自injectIntl
HoC的道具<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;
基于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收集用于翻译的消息所必需的。
您正在尝试将名为 FormattedMessage 的 React 组件呈现为需要字符串的占位符标记。
相反,您应该只创建一个名为 FormattedMessage 的函数,该函数将字符串返回到占位符中。
function FormattedMessage(props) {
...
}
<input placeholder=`{$(FormattedMessage({...messages.placeholderIntlText})}` />
就我而言,我将整个应用程序放在一个文件中,因此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 />
}
}
从@gazdagerg 的回答开始,我已经修改了他的代码,以便:
import React from 'react';
import { injectIntl, intlShape, defineMessages } from 'react-intl';
const InputWithPlaceholder = ({ intl, placeholder }) => {
const messages = defineMessages({
placeholder: {
id: placeholder,
defaultMessage: '',
},
});
if(messages.placeholder.id) {
return (
<input placeholder={ intl.formatMessage(messages.placeholder) } />
);
} else {
return (
<input/>
);
}
};
InputWithPlaceholder.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(InputWithPlaceholder);
您可以通过以下方式在其他文件中使用它:
import InputWithIntlPlaceholder from 'your/path/to/component/InputWithIntlPlaceholder';
... more code here ...
<InputWithIntlPlaceholder placeholder="your.locale.string.id" />
像这样:
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));