React中为数组价格添加货币格式，无需文本框实现方案咨询

嗨，我来帮你搞定这个问题！你遇到的情况是react-format-currency的Currency组件默认会渲染一个文本输入框，但你只需要纯文本的货币格式展示对吧？这里有两种靠谱的解决办法：

方法一：用JavaScript原生API手动格式化（推荐） #

不需要依赖第三方组件，直接用浏览器原生的Intl.NumberFormat就能轻松实现自定义的货币格式，完全可控还没多余DOM元素。

首先写一个格式化函数：

const formatCurrency = (price, currencyCode) => {
  // 针对印尼盾（IDR）配置，你可以根据需求调整地区和参数
  return new Intl.NumberFormat('id-ID', {
    style: 'currency',
    currency: currencyCode,
    minimumFractionDigits: 0, // 印尼盾通常不显示小数，按需开启
    maximumFractionDigits: 0
  }).format(price);
};

然后在你的渲染逻辑里直接调用这个函数：

this.state.json.map((data, index) => {
  return (
    <h6 key={index}>{formatCurrency(data.price, 'IDR')}</h6>
  );
})

这样渲染出来的就是纯文本格式的价格，比如Rp10.000、Rp25.000，完全没有文本框。

方法二：调整react-format-currency组件的配置 #

如果你还是想继续用这个库，可以查一下它的文档，看看是否支持渲染纯文本的属性。有些版本的这个组件提供了input={false}或者component="span"这样的参数，用来关闭输入框渲染：

<Currency 
  value={data.price} 
  currency="IDR" 
  input={false} // 禁用输入框，渲染纯文本
/>

如果这个参数生效的话，组件就会输出纯文本格式的货币而不是输入框了。

对比下来，原生API的方法更灵活，不需要依赖第三方库的版本特性，推荐优先使用哦！

内容的提问来源于stack exchange，提问作者Riyan Maulana