求助：react-currency-format组件在页面中无法渲染

你的代码核心问题在于renderText回调函数没有返回JSX内容。当箭头函数用大括号{}包裹代码块时，必须显式使用return语句返回要渲染的元素，否则默认返回undefined，导致CurrencyFormat组件没有可渲染的内容。

修正后的代码如下：

import React from "react";
import "./Subtotal.css";
import CurrencyFormat from "react-currency-format";

function Subtotal() {
  return (
    <div className="subtotal">
      <CurrencyFormat
        renderText={(value) => {
          // 显式return JSX内容
          return (
            <>
              <p>
                Subtotal (0 items): <strong>0</strong>
              </p>
              <small className="subtotal__gift">
                <input type="checkbox" />
                This order contains a gift
              </small>
            </>
          );
        }}
        decimalScale={2}
        value={0}
        displayType={"text"}
        thousandSeparator={true}
        prefix={"$"}
      />

      <button>Go to checkout</button>
    </div>
  );
}

export default Subtotal;

或者你也可以去掉大括号，让箭头函数隐式返回：

renderText={(value) => (
  <>
    <p>
      Subtotal (0 items): <strong>0</strong>
    </p>
    <small className="subtotal__gift">
      <input type="checkbox" />
      This order contains a gift
    </small>
  </>
)}

这两种写法都能让CurrencyFormat组件正常渲染内容。

内容的提问来源于stack exchange，提问作者Caio Lagreca