在 React.Intl 上運行 function<formattedmessage></formattedmessage>

Question

我正在嘗試運行 function 以對 FormattedMessage 的結果進行進一步的字符串操作。 即使通過 function 運行它后，我也找不到方法，如下所示：

<Button text={ this.testMethod(buttonText) } />

testMethod(result){
 return result;
}

總之：我試圖獲取實際文本而不是 object，然后進行一些字符串操作。

不想要這個：{id: "test", defaultMessage: "Hello there"}

需要：訪問“Hello there”，例如提取單詞“there”

Answer 1

是的你可以。 添加一個組件作為FormattedMessage的子組件以進行進一步的轉換。 這是一個讓你開始的最小片段

<FormattedMessage id="hello">
  {(text) => {
    console.log(text);
    return <>{text.toUpperCase()}</>;
  }}
</FormattedMessage>

實例