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.