React中如何根据传入prop的变量值动态修改元素背景颜色

完全可以根据组件接收的prop动态修改元素的背景色，你的代码无法实现预期效果是因为存在几处逻辑和语法问题，具体修改方案如下：

问题原因 #

• 你定义的colorTest函数没有返回值，也没有在渲染逻辑中调用，函数内部的color属于局部变量，渲染层无法访问
• 你写的判断条件taskObj === "JavaScript"存在逻辑错误：后续代码中用到了taskObj.Name、taskObj.Description，说明taskObj是对象类型，不可能和字符串直接相等，该判断永远会走入else分支

修正后的代码 #

import React from 'react';
import "./Card.css"
// 注意：React自定义组件名首字母必须大写，否则会被识别为原生HTML标签
const Card = ({taskObj, index }) => {
    // 将颜色判断逻辑改造为有返回值的函数，这里的taskObj.type可替换为你实际要判断的属性字段
    const getBgColor = () => {
        if(taskObj.type === "JavaScript") {
            return "red";
        } else {
            return "yellow";
        }
    }

    return (
        <>
            <div className="card-wrapper mr-5">
                {/* 调用颜色函数拿到返回值传入style属性 */}
                <div className="card-top card-todo" style={{"background-color": getBgColor()}} ></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;

简化写法 #

如果颜色判断逻辑比较简单，也可以直接在style属性中写三元表达式，不用单独封装函数：

<div 
  className="card-top card-todo" 
  style={{"background-color": taskObj.type === "JavaScript" ? "red" : "yellow"}} 
></div>

内容的提问来源于stack exchange，提问作者Fabioss