如何根據值更改背景顏色？

Question

我正在學習 React 並且出現了這個問題。 我可以根據作為道具的變量值更改背景顏色嗎？

謝謝

import React from 'react';

import "./Card.css"
const card = ({taskObj, index }) => {

    const colorTest = () => {
        let color
        if(taskObj === "JavaScript") {
            color = "red";
        } else {
            color = "Yellow";
        }
    }

    return (
        <>
            <div className="card-wrapper mr-5">
                <div className="card-top card-todo" style={{"background-color": color}} ></div>
                <div className="task-holder">
                <span className="card-header">{taskObj.Name}</span>
                <p>{taskObj.Description}</p>

                    <div className="svg-card">
                        <i className="far fa-edit svg mx-4"></i>
                        <i className="fas fa-trash-alt svg"></i>
                    </div>
                </div>
            </div>
        </>
    );
};

export default card;```

Answer 1

嘿，使用style={{'backgroundColor': color }} 。 還要像這樣在卡片組件中添加變量： const color = taskObj === "JavaScript" ? 'red' : yellow const color = taskObj === "JavaScript" ? 'red' : yellow 。 您將獲得如下所示的組件：

import React from 'react';

import "./Card.css"
const card = ({taskObj, index }) => {

    const color = taskObj === "JavaScript" ? "red" : "yellow";

    return (
        <>
            <div className="card-wrapper mr-5">
                <div className="card-top card-todo" style={{"backgroundColor": color}} ></div>
                <div className="task-holder">
                <span className="card-header">{taskObj.Name}</span>
                <p>{taskObj.Description}</p>

                    <div className="svg-card">
                        <i className="far fa-edit svg mx-4"></i>
                        <i className="fas fa-trash-alt svg"></i>
                    </div>
                </div>
            </div>
        </>
    );
};

export default card;

Answer 2

你可以這樣做：

...
style={{"backgroundColor": `${taskObj === "javascript" ? 'red' : 'yellow'}`}}
...