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

Question

我不确定如何从中获取值

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

转换成占位符格式，如输入:

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

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

Answer 1

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

相反，react-intl提供lower level API出于完全相同的原因。渲染组件本身在底层使用此 API 将值格式化为 HTML。您的场景可能需要您使用较低级别 formatMessage(...) API。

您应该注入(inject)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 功能，因此请根据您的设置进行调整。