Question

我正在尝试制作一个支持多语言的应用程序为此，我使用react-intl转换数据。而这样做，我面临一个问题，当我尝试翻译它返回我为[OBJECT OBJECT]，但我希望输入数字或字符串。

我正在使用“ react-intl”：“ 2.7.2”进行翻译，“ react-tooltip”：“ 3.10.0”，用于呈现工具提示值

工具提示代码。在这种情况下，我希望将工具提示值转换为不同的语言数字格式

<div className="column number" 
 data-tip={ <FormattedNumber value= {1234234545465655} />}>
 1234234545465655
</div>

enter image description here

请找到上面的图片以供参考

我得到的输出为[OBJECT OBJECT]

源代码：

import { FormattedMessage,FormattedNumber,formatNumber,injectIntl } from 'react-intl';
    const TDSHighlights = ({
      GlobalData,
      currencySymbol,
      currency,
      props,
    }) => (
         {console.log(props)}
         <div className="column number" 
                  data-tip={num}>
          Tooltip value
         </div>

        );
    export default injectIntl(TDSHighlights);

在打印道具数据时未获得道具价值时添加了示例代码

Answer 1

FormattedNumber是一个试图向页面呈现跨度（或其他元素）的组件。如果您只想要一个函数，则可以调用它返回一个字符串，而可以使用formatNumber

import { injectIntl } from 'react-intl';


const SomeComponent = (props) => {
  const num = props.formatNumber(1234);
  //    or with options, as in:
  // const num = props.formatNumber(1234, { style: 'currency', currency: 'USD' });
  return (
    <div className= column number" data-tip={num}>
      Tooltip value
    </div>
  );
}

export default injectIntl(SomeComponent);

如何使用FormattedNumber将对象转换为Number或字符串以使用REACTJs在react工具提示中呈现？

1 个答案: