如何通过props传递className？动态修改样式类问题求助

1. 通过Props传递className的基础方法 #

父组件直接将className作为props传递给子组件，子组件在目标元素上组合使用即可：

// 父组件
<ListItemComponent 
  className={classes.baseListItem}
  driftcolor={driftcolorscheme}
  driftstatus={selectedDriftStatus}
/>

// 子组件
const ListItemComponent = (props) => {
  return (
    <li className={`${props.className} ${props.driftcolor}`}>
      {props.driftstatus}
    </li>
  );
};

如果使用CSS Modules，确保driftcolor对应的类名在样式文件中定义（比如.red { color: #f00; }），或者直接传递CSS Modules对象的属性（如classes.red）。

2. 具体场景的代码优化（下拉选择控制driftcolor） #

你的代码存在两个核心问题：依赖ref获取DOM值不符合React单向数据流、className拼接方式错误。以下是重构后的完整方案：

步骤1：用受控组件管理下拉选择状态 #

替换ref，使用useState管理选中值，这是React推荐的做法：

import { useState } from 'react';

// 父组件内部
const [selectedDriftStatus, setSelectedDriftStatus] = useState(
  props.itemEdit ? props.itemEdit.driftstatus : ""
);

// 根据选中值确定颜色类名
const getDriftColor = () => {
  switch(selectedDriftStatus) {
    case "Akut ur beredskap":
    case "Drift":
      return "red";
    case "I beredskap":
      return "blue";
    default:
      return "";
  }
};
const driftcolorscheme = getDriftColor();

// 下拉选择变化处理函数
const handleDriftChange = (e) => {
  setSelectedDriftStatus(e.target.value);
};

步骤2：修改下拉框为受控组件 #

<select 
  className={classes.selectiontextbox}
  value={selectedDriftStatus}
  onChange={handleDriftChange}
>
  <option>Akut ur beredskap</option>
  <option>Drift</option>
  <option>I beredskap</option>
</select>

可选优化：给option添加固定value属性，避免依赖文本判断（更稳定）：

<select 
  className={classes.selectiontextbox}
  value={selectedDriftStatus}
  onChange={handleDriftChange}
>
  <option value="akut">Akut ur beredskap</option>
  <option value="drift">Drift</option>
  <option value="standby">I beredskap</option>
</select>

对应的颜色判断也改为基于value：

const getDriftColor = () => {
  switch(selectedDriftStatus) {
    case "akut":
    case "drift":
      return "red";
    case "standby":
      return "blue";
    default:
      return "";
  }
};

步骤3：正确传递并使用driftcolor #

将driftcolorscheme作为props传给子组件，子组件正确拼接className：

// 父组件传递
<ListItemComponent 
  className={classes.listItem}
  driftcolor={driftcolorscheme}
  driftstatus={selectedDriftStatus}
/>

// 子组件接收渲染
const ListItemComponent = (props) => {
  // 如果用CSS Modules，且颜色类在样式文件中：
  // 比如父组件传递的是classes.red，直接拼接即可
  return (
    <li className={`${props.className} ${props.driftcolor}`}>
      {props.driftstatus}
    </li>
  );
};

关键错误修正 #

• 原代码中className={classes + "." + props.driftcolor}拼接错误：如果classes是CSS Modules对象，应该用classes[props.driftcolor]或者直接拼接类名字符串，而非对象加字符串。
• 避免用ref获取DOM值：React的状态管理能更可靠地跟踪用户输入，减少DOM操作带来的bug。

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