react Intl-如何从formattedMessage获取值

Question

我有一个需要数字的组件。 <ClickableNumber num={num} />

我从我的语言包中收到一个带有FormattedMessage的数字
<ClickableNumber num={<FormattedMessage id="native_number" />} />

当我安慰日志num内ClickableNumber它是一个对象。

如何从<FormattedMessage id="native_number" />获取值的字符串或数字版本？

如果使用intl.formatMessage({ id: 'native_number' })则可以获取该值，但是我试图重用ClickableNumber并且不想在injectIntl包装使用该组件的每个组件

Answer 1

我从来没有使用过react-intl，所以我不知道它是否会起作用，但它在概念上应该起作用。

您可以做的是创建一个实用程序函数，该函数将返回所需的结果。 对于这种情况，请使用intl.formatMessage({ id: 'native_number' })和格式化的Component。

const getNativeNumber = () => {
   // I don't know how but you can get the number here
   // something like
   const nativeNumber = intl.formatMessage({ id: 'native_number' });
   return {
     component: <FormattedMessage id="native_number" />,
     nativeNumber: nativeNumber
   }
}

<ClickableNumber num={getNativeNumber()} />

console.log(this.props.num.nativeNumber)  // This will have the native number in your ClickableNumber component.