javascript - 如何在 React (JSX) 中连接动态值
问题描述
使用我的端点,我可以获取数据并将货币设置为参数,以便将接收到的数据转换为用户选择的货币。我将货币作为道具传递给呈现该数据的组件问题是我无法动态显示价格。我不确定如何正确连接 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;
解决方案
而不是模板文字,这是您在那里打印字符串的原因,您可以简单地评估这些值。请参阅下面我建议的解决方案:
<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)
推荐阅读
- python - Pandas 数据框过滤基于日期的行
- java - 错误:不兼容的类型:布尔值无法转换为 int
- postgresql - 如何使用 IS DISTINCT FROM 进行不敏感检查
- wpf - 带有 InputBindings 的样式内的 TextBox ControlTemplate
- javascript - 用两行循环 angular flex 布局的最佳方法?
- naming-conventions - Laravel 5.7 变量在 HTML 中被小写
- sql - Oracle活动进程中获取sid、SQL查询
- android - 打印印度卢比符号 (₹)
- java - 使用java更新具有大量数据的csv中的特定列
- xml - 使用 shell 命令从 xml 文件中提取数据