如何解决如何在ReactJSX中串联动态值
使用端点,我可以获取数据并将货币设置为参数,以便将接收到的数据转换为用户选择的货币。我正在将货币作为道具传递到呈现该数据的组件中。问题是我无法动态显示价格。我不确定如何正确连接JSX ... {crypto.quote.${currency}.price.toFixed(2)
}仅显示字符串。对货币(美元,欧元等)进行硬编码可得出价格,但我希望它是动态的。谢谢,
请帮助:)
import React from 'react';
import { Link } from "react-router-dom"
const Crypto = ({ crypto,currency }) => {
return <>
<tr>
<td>{crypto.cmc_rank}</td>
<td>
<Link to={{
pathname: `/crypto/${crypto.id}`,state: crypto
}}>
{crypto.name}
</Link>
</td>
<td>{crypto.symbol}</td>
<td>
{`crypto.quote.${currency}.price.toFixed(2)`}
</td>
<td>{crypto.quote.USD.percent_change_24h}</td>
<td>
{crypto.quote.USD.market_cap.toString().slice(0,3) + "B"}
</td>
</tr>
</>
}
export default Crypto;
解决方法
代替Template Literals(这是在那里打印字符串的原因),您可以简单地计算值。见下面我建议的解决方案:
<td>
{crypto.quote[currency].price.toFixed(2)}
</td>
在下面的示例中进行检查:
const crypto = { quote: { USD: { price: 120.1122 } } }
const currency = 'USD'
const result = crypto.quote[currency].price.toFixed(2)
console.log(result)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。