reactjs – React-Intl如何在输入占位符中使用FormattedMessage

发布时间：2020-12-15 20:55:28 所属栏目：百科来源：网络整理

导读：我不确定如何从中获取值 FormattedMessage {...messages.placeholderIntlText} / 像输入一样占位符格式： input placeholder={FormattedMessage {...messages.placeholderIntlText} /} / 因为它会在实际占位符中返回[Object object].有没有办法获得实际的正

我不确定如何从中获取值

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

像输入一样占位符格式：

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

因为它会在实际占位符中返回[Object object].有没有办法获得实际的正确值？

<格式化... /> react-intl中的React组件用于渲染场景,并不打算用于占位符,替换文本等.它们呈现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功能,因此请根据您的设置进行调整.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!