如何根据下拉选择为React列表Div设置不同背景色

先修正原代码中的问题 #

原代码存在几处笔误和状态传递缺失的问题，先进行修复：

1. 父组件FruitListRender中fruitType初始值应为空字符串（而非数组），因为下拉框的值是字符串类型
2. 表单组件需要接收fruitType和setFruitType作为props，否则无法读写下拉框的选中状态
3. 表单组件中setFruitsList参数名错误，应改为setFruitList；setNewFruits应为setNewFruit，对应父组件的状态更新函数

实现背景色逻辑 #

在FruitList组件中，根据每个水果的type属性，动态设置背景色：

• 选中Seedy Fruit时，列表项背景设为绿色
• 选中Non Seedy Fruit时，列表项背景设为红色

可以通过内联样式或动态CSS类两种方式实现，以下是完整代码：

修改后的FruitListRender.jsx

import React, { useState } from "react";
import FruitForm from "./FruitForm";
import FruitList from "./FruitList";

const FruitListRender = () => {
  const [newFruit, setNewFruit] = useState("");
  const [fruits, setFruitList] = useState([]);
  const [fruitType, setFruitType] = useState(""); // 修正初始值为字符串

  return (
    <div>
      <div>
        <FruitForm
          newFruit={newFruit}
          setNewFruit={setNewFruit}
          fruits={fruits}
          setFruitList={setFruitList}
          fruitType={fruitType}
          setFruitType={setFruitType}
        />
      </div>
      <div>
        <FruitList fruits={fruits} setFruitList={setFruitList} />
      </div>
    </div>
  );
};
export default FruitListRender;

修改后的FruitForm.jsx（原FruitListForm，统一组件名）

import React from "react";
import { v4 as uuidv4 } from "uuid";

const FruitForm = ({
  newFruit,
  setNewFruit,
  fruits,
  setFruitList,
  fruitType,
  setFruitType
}) => {
  const addFruits = (event) => {
    event.preventDefault();
    // 避免空值提交
    if (!newFruit.trim() || !fruitType) return;
    setFruitList([...fruits, { id: uuidv4(), name: newFruit, type: fruitType }]);
    setNewFruit(""); // 清空输入框
    setFruitType(""); // 可选：提交后重置下拉框
  };
  return (
    <form className="fruitform" onSubmit={addFruits}>
      <div>
        <input
          value={newFruit}
          type="text"
          placeholder="Name of Fruit"
          onChange={(e) => setNewFruit(e.target.value)}
        />
      </div>
      <div className="fruitform__addfruit">
          <select
            value={fruitType}
            className="fruitform__dropdown"
            onChange={(e) => setFruitType(e.target.value)}
          >
            <option value="" disabled>
              Fruit Type
            </option>
            <option value="Seedy Fruit">Seedy Fruit</option>
            <option value="Non Seedy Fruit">Non Seedy Fruit</option>
          </select>
        </div>

      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  );
};

export default FruitForm;

修改后的FruitList.jsx（内联样式实现）

import React from "react";

const FruitList = ({ fruits = [], setFruitList }) => {
  // 根据水果类型返回对应背景色
  const getBgColor = (type) => {
    switch(type) {
      case "Seedy Fruit":
        return "#86e49d"; // 淡绿色
      case "Non Seedy Fruit":
        return "#ff7878"; // 淡红色
      default:
        return "transparent";
    }
  };

  return (
    <div>
      {fruits.map((fruit) => (
        <ul 
          key={fruit.id} 
          style={{ 
            backgroundColor: getBgColor(fruit.type),
            padding: "8px",
            margin: "8px 0",
            borderRadius: "4px",
            listStyle: "none"
          }}
        >
          <li className="fruit-list">
            <p>{fruit.name}</p>
            <p>{fruit.type}</p>
          </li>
        </ul>
      ))}
    </div>
  );
};
export default FruitList;

可选：用CSS类实现（更推荐）

如果希望样式与逻辑分离，可以定义CSS类：

/* 全局样式或组件样式文件 */
.seedy-fruit-bg {
  background-color: #86e49d;
}
.non-seedy-fruit-bg {
  background-color: #ff7878;
}
.fruit-list-container {
  padding: 8px;
  margin: 8px 0;
  border-radius: 4px;
  list-style: none;
}

然后修改FruitList.jsx：

import React from "react";

const FruitList = ({ fruits = [], setFruitList }) => {
  const getBgClass = (type) => {
    switch(type) {
      case "Seedy Fruit":
        return "seedy-fruit-bg";
      case "Non Seedy Fruit":
        return "non-seedy-fruit-bg";
      default:
        return "";
    }
  };

  return (
    <div>
      {fruits.map((fruit) => (
        <ul 
          key={fruit.id} 
          className={`fruit-list-container ${getBgClass(fruit.type)}`}
        >
          <li className="fruit-list">
            <p>{fruit.name}</p>
            <p>{fruit.type}</p>
          </li>
        </ul>
      ))}
    </div>
  );
};
export default FruitList;

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