我想使用react-intl API的formatMessage函数来插入一个消息作为占位符,但我找不出正确的方式来访问这个函数。React-intl,与Typescript一起使用API
这里是什么,我有一个简化版本:
//index.tsx
<IntlProvider locale={`fr-FR`} messages={messages_fr}>
<NameForm/>
</IntlProvider>,
//nameForm.tsx
interface NameFormProps {
intl?: InjectedIntlProps,
}
export default injectIntl(NameForm);
class NameForm extends React.Component<NameFormProps, {}> {
render() {
let namePlaceholder = this.props.intl.formatMessage(
{id: "NAME_PLACEHOLDER",
defaultMessage: "name"
});
return (
<form>
<input placeholder={namePlaceholder} type="text"/>
</form>
);
}
我用InjectedIntlProps类型的国际道具,因为IntlShape没有似乎提供了一个FORMATMESSAGE方法。
我增加了一个?到intl道具,因为我一直有一个“属性”intl'缺少“(但不injectIntl应该返回一个组件没有这个道具?)
现在它编译,但运行时出现错误(”无法读取属性'displayName'的未定义“我猜是因为默认导出没有明确的名称)。
我觉得我不会走向正确的方向,但找不到任何typecript/react-intl项目的例子。
感谢您的帮助!
没” t为我工作......但改变“扩展React.Component”为“扩展React.PureComponent”。 – karfus
对我来说同样重要......导出类后,“导出默认值”必须出现! – karfus
我再次编辑它。事实上,您需要将输出行放在文件末尾,您可以扩展“InjectedIntlProps”而不是手动添加intl道具 – Emarco