React中如何根据props动态为表格行设置className？

嘿，我懂你想要实现的效果！在React里，我们有好几种方式能实现和Angular中ng-class类似的动态行样式绑定，下面给你拆解几种常用的方法：

1. 用classnames库实现（最接近Angular的写法） #

这是最贴近你之前Angular写法的方式，借助第三方库classnames可以轻松实现多条件类名绑定。

首先安装依赖：

npm install classnames

然后在组件中导入并使用：

import classNames from 'classnames';

// 假设这是你的表格行渲染逻辑
<tr 
  className={classNames({
    green: this.props.data.status === 'Success',
    red: this.props.data.status === 'Failure',
    amber: this.props.data.status === 'Inprogress'
  })}
>
  <td>{this.props.data.someContent}</td>
  {/* 其他表格单元格 */}
</tr>

classnames会自动根据对象中布尔值的真假，拼接对应的类名，非常直观。

2. 自定义函数/映射对象（无需第三方库） #

如果不想引入额外依赖，可以自己通过函数或者映射关系来获取类名，代码同样简洁：

方式A：使用映射对象 #

创建一个状态与类名的映射表，直接根据状态取值：

// 在组件内部定义映射关系
const statusToClass = {
  Success: 'green',
  Failure: 'red',
  Inprogress: 'amber'
};

// 渲染行时
<tr className={statusToClass[this.props.data.status] || ''}>
  <td>{this.props.data.someContent}</td>
</tr>

这种方式扩展性很强，后续新增状态只需在映射表中添加对应关系即可。

方式B：使用switch判断函数 #

如果需要更复杂的逻辑判断，可以封装一个函数：

// 定义获取类名的函数
const getRowClassName = () => {
  const { status } = this.props.data;
  switch(status) {
    case 'Success':
      return 'green';
    case 'Failure':
      return 'red';
    case 'Inprogress':
      return 'amber';
    default:
      return ''; // 默认类名或空
  }
};

// 渲染行时
<tr className={getRowClassName()}>
  <td>{this.props.data.someContent}</td>
</tr>

3. 三元运算符（适合简单场景） #

如果状态判断逻辑简单，也可以直接用三元运算符拼接类名：

<tr 
  className={
    this.props.data.status === 'Success' ? 'green' :
    this.props.data.status === 'Failure' ? 'red' :
    this.props.data.status === 'Inprogress' ? 'amber' :
    ''
  }
>
  <td>{this.props.data.someContent}</td>
</tr>

不过这种方式在状态较多时会显得冗长，建议优先考虑前两种方法。

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