无法在反应三元条件下呈现 mui 图标

Question

我正在尝试在满足条件时呈现 mui 图标，但它使我的应用程序崩溃。我相信这可能是因为我在 {} 中调用了 PriceCheckIcon。有帮助吗？

<span
            style={
              Price > cinemaWorldPrice ? { color: "green" } : { color: "red" }
            }
          >
            {error && Price > cinemaWorldPrice ? (
              <div>{PriceCheckIcon}</div>
            ) : (
              Number(cinemaWorldPrice).toFixed(2)
            )}
          </span>

错误信息：

react-dom.development.js:14757 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead

Answer 1

PriceCheckIcon需要以JSX形式使用。

变化：

<div>{PriceCheckIcon}</div>

至

<PriceCheckIcon />

无法在反应三元条件下呈现 mui 图标

cannot render mui icon in react ternary condition

javascript

conditional-operator

reactjs

material-ui