Question

我正在尝试创建一个React表，其中每行都是灰色或白色。我这样做是通过在创建时传递道具'灰色'或'白色'，但在我的MyRow类中，我不确定如何使用此道具并将其转换为样式。

MyTable.js中的相关代码：

    this.props.items.forEach(function(item) {
        if (i % 2 === 0) {
            rows.push(<MyRow item={item} key={item.name} color={'gray'} />);
        } else {
            rows.push(<MyRow item={item} key={item.name} color={'white'} />);
        }
        i++;
    }.bind(this));

MyRow.js渲染功能：

render() {
    const color = this.props.color;

    const rowColor = {styles.color}; //?? I’m not sure how to do this—how to get color to take on either gray or white?

    return (
        <tr className={styles.rowColor}>
            <td className={styles.td}>{this.props.item.name}</td>
            <td className={styles.editButton}> <Button
                    onClick={this.handleEditButtonClicked}
                />
            </td>
        </tr>
    );
}

MyRow.css：

.td {
    font-weight: 500;
    padding: 0 20px;
}

.gray {
    background-color: #d3d3d3;
}

.white {
    background-color: #fff;
}

Answer 1

我相信您应该能够将prop直接传递给行，如下所示，因为它已经被定义为MyTable.js文件中的字符串：

render() {
    return (
        <tr className={this.props.color}>
            <td className={styles.td}>{this.props.item.name}</td>
            <td className={styles.editButton}> <Button
                    onClick={this.handleEditButtonClicked}
                />
            </td>
        </tr>
    );
}

此外，从您发布的代码中，不清楚styles对象位于您尝试访问这些属性的位置。如果您想访问styles.rowColor，则需要定义styles个对象：

const styles = {
    rowColor: color
};

Answer 2

按照此操作使用 row.value 更改单个行单元格颜色

{
  Header: () => <div className="text-center font-weight-bold">Status</div>,
  accessor: "selectedstatus",
  className: "font",
  width: 140,
  Cell: (row) => (
    <div
      className="text-center h-6"
      style={{ background: row.value === "Selected" ? "green" : "red" }}
    >
      {row.value}
    </div>
  ),
},

如何生成具有不同颜色行的React表？

2 个答案: