React Bootstrap Table trStyle报错：无法读取undefined的'createdby'属性及条件设置行背景色失效问题咨询

问题1："Cannot read properties of undefined (reading 'createdby')" 错误 #

这个错误的核心原因有两个：

1. 参数顺序搞反了：React Bootstrap Table（v1.x）的trStyle函数参数是(row, rowIndex)，而不是你写的(cell, row)。你把第一个参数当成了cell，第二个才是row，但实际上第一个参数就是当前行的数据对象，第二个是行索引。这就导致你访问row.createdby时，row其实是cell对象，自然找不到createdby字段。
2. 缺少空值校验：即使参数正确，如果你的数据中存在空项或者某条数据没有createdby字段，也会触发这个错误。

修复代码：

trStyle = (row, rowIndex) => { 
  // 使用可选链操作符?.确保row和createdby存在时才访问
  if (row?.createdby === "system") { 
    return { backgroundColor: '#b2f3f3' } // 顺便修正了无效颜色值，后面会说明
  } else { 
    return { backgroundColor: '#ffffff' } 
  } 
}

问题2：trStyle设置背景色不生效 #

导致这个问题的原因结合上面的错误，主要有几点：

1. 参数顺序错误：参数搞反后逻辑判断完全错误，自然不会应用预期的样式。
2. 无效的颜色值：你写的#b2hf3是非法的十六进制颜色——十六进制颜色只能包含0-9、a-f（大小写均可），其中的h是无效字符，浏览器无法识别，所以不会显示任何背景色。
3. 版本API差异：如果你使用的是React Bootstrap Table v2.x，那么trStyle已经被替换成rowStyle属性，继续用trStyle会完全不生效。
4. 样式优先级被覆盖：组件默认的行样式可能优先级比你设置的行内样式高，导致自定义样式不显示。

分步修复：

1. 先修正参数顺序和颜色值（参考上面的trStyle代码）。
2. 检查你的组件版本：
   • 如果是v1.x：继续使用trStyle={this.trStyle}
   • 如果是v2.x：把属性改成rowStyle={this.trStyle}
3. 如果样式还是不生效，可以尝试用自定义className的方式（优先级更高）：
   • 先定义一个trClassName函数：

     trClassName = (row, rowIndex) => {
       return row?.createdby === "system" ? 'system-generated-row' : '';
     }
     

   • 在组件中使用trClassName={this.trClassName}代替trStyle
   • 在你的CSS文件中添加样式：

     .system-generated-row {
       background-color: #b2f3f3 !important; /* 用!important确保优先级足够，或者根据组件样式调整选择器权重 */
     }
     

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