如何在 React (JSX) 中連接動態值

Question

通過我的端點，我可以獲取數據並將貨幣設置為參數，以便將接收到的數據轉換為用戶選擇的貨幣。 我將貨幣作為道具傳遞給呈現該數據的組件 問題是我無法動態顯示價格。 我不確定如何正確連接 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;

Answer 1

您可以簡單地評估值，而不是模板文字（這是您在那里打印字符串的原因）。 請參閱下面我建議的解決方案：

<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)