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

Question

我不确定如何从中获取值

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

成占位符格式，如输入：

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

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

原文由 Bryan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<Formatted... /> react-intl 的 React 组件旨在用于渲染场景，而不是用于占位符、替代文本等。它们渲染 HTML，而不是纯文本，在您的场景中没有用。

相反， react-intl 出于同样的原因提供了 较低级别的 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 功能，因此请根据您的设置进行调整。

原文由 lsoliveira 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

• 您可以使用 intl prop from injectIntl HoC
• 您还可以提供功能作为子组件：

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

原文由 langpavel 发布，翻译遵循 CC BY-SA 4.0 许可协议