React：如何为下拉选项设置条件样式？解决props.className只读问题

React创建的虚拟DOM元素props是只读的，所以你没法在生成元素后修改它的className属性。正确的做法是在遍历生成元素的过程中，直接根据索引判断并设置对应的className，不需要后续循环修改。

优化后的代码如下：

handleOptions = () => {
  // 将禁用索引转为Set，提升查找效率，同时处理notPressAble为undefined的情况
  const disabledIndexes = new Set(this.props.notPressAble || []);
  
  return this.props.options.map((option, i) => {
    // 根据当前索引是否在禁用列表中，选择对应的className
    const currentClass = disabledIndexes.has(i) 
      ? classes.dropdownoptionsnotpressable 
      : classes.dropdownoptions;
    
    return (
      <a 
        key={i} 
        className={currentClass}
      >
        {option}
      </a>
    );
  });
}

优化说明 #

• 使用Set存储禁用索引，把原来嵌套循环的O(n*m)时间复杂度降到O(n)，性能更优
• 直接在map过程中完成判断和className赋值，逻辑更简洁，避免了修改只读props的问题
• 用this.props.notPressAble || []处理了props未传入的情况，避免报错

如果需要叠加样式（比如默认类名保留，再加禁用样式），可以这样写：

const currentClass = disabledIndexes.has(i) 
  ? `${classes.dropdownoptions} ${classes.dropdownoptionsnotpressable}` 
  : classes.dropdownoptions;

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