使用函数进行反应或声明

Question

我有一个JSX语句，可以像这样呈现道具：

<span>{rentRate || quotedSeatCharges}</span>

哪个渲染得很好。但是，我有一个函数，它在它之前加上一个货币名称/符号格式化它：

const formatCost = (cost) => {
    if (currencySymbol) return `${currencySymbol}${cost}`
    return `${currencyName} ${cost}`
}

我试过这样称呼它：

<span>{formatCost(rentRate || quotedSeatCharges)}</span>

哪个适用于第一个道具，但不适用于第二个道具。

我也试过

<span>{formatCost(rentRate) || formatCost(quotedSeatCharges)}</span>

哪个仍适用于第一个道具，但第二个道具最终为null。

我也试过在父级别将这两个道具合二为一：

rentSeatCost={rentRate}
rentSeatCost={quotedSeatCharges}

然后在子组件中：

formatCost(rentSeatCost)

但仅适用于第一个道具，并且对第二个道具没有任何作用，就像第一次尝试一样。

有没有办法可以在我的方法中执行此操作？或者我应该放弃并找到替代方案？

Answer 1

打印出您的currencyName和currencySymbol变量，调用该函数时不得设置它们。

Answer 2

所以我停止查看子组件并查看上面的父组件。我正在渲染子组件两次，结果我只在currencySymbol和currencyName中传递了两个组件中的一个组件，这就是为什么另一个组件没有前置两种货币的原因。

感谢大家花时间研究这个问题。这是我自己的疏忽。

Answer 3

你可以使用像rentRate ? formatCost(rentRate) : formatCost(quotedSeatCharges)

这样的三元组

希望有所帮助

谢谢