你如何使用 React Bootstrap 上的表上的条件动态渲染类？答案

【问题标题】：How do you render classes dynamically using conditioning on a table on React Bootstrap?你如何使用 React Bootstrap 上的表上的条件动态渲染类？
【发布时间】：2021-08-12 02:18:12
【问题描述】：

我想根据在表上动态传递的事务来更改类的颜色。

import React from "react";
import Table from "react-bootstrap/Table";
import "./TableComponent.css";

const TableComponent = ({
  Movement
}) => {
  const colorType = Movement.map((obj) => {
    let colorClass = "p-1 ";
    if (obj.Type === "Deposit") {
      colorClass += "depo";
    } else {
      colorClass += "wit";
    }
    return colorClass;
  });


  const renderMovements = (Movement, i) => {
    return ( <
      tr key = {
        i
      } >
      <
      td className = "p-3" >
      <
      div className = {
        colorType
      } > {
        Movement.Type
      } < /div> <
      /td> <
      td className = "p-3 App"
      colSpan = "2" > {
        Movement.Date
      } <
      /td> <
      td className = "p-3 App" > {
        Movement.Amount
      } < /td> <
      /tr>
    );
  };

  return ( <
    div >
    <
    Table striped bordered hover size = "sm" >
    <
    thead >
    <
    tr >
    <
    th className = "p-2 App" > Transaction < /th> <
    th className = "p-2 App"
    colSpan = "2" >
    Date <
    /th> <
    th className = "p-2 App" > Amount < /th> <
    /tr> <
    /thead> <
    tbody > {
      Movement.map(renderMovements)
    } < /tbody> <
    /Table> <
    button onClick = {
      testColor
    } > Test Color < /button> <
    /div>
  );
};

export default TableComponent;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我遇到的问题是添加的最后一个类将在每个元素上呈现。当运动类型是取款时，我希望它有红色背景，如果是存款，则有绿色背景。

【问题讨论】：

标签： javascript css reactjs bootstrap-4 react-bootstrap

【解决方案1】：

您需要从 colorType 返回一个字符串，但您返回的是一个数组。

  const colorType = (movement) => {
    let colorClass = "p-1 ";
    if (movement.Type === "Deposit") {
      colorClass += "depo";
    } else {
      colorClass += "wit";
    }
    return colorClass;
  });

现在渲染时可以这样做

<div className={colorType(Movement)}> 
 {Movement.Type}
</div>

【讨论】：

帮助很大！