映射到数组，我试图根据响应更改 Bootstrap 按钮的 "color" 参数

Question

（项目是使用 Axios 和 react-strap 的 React）

我有一个来自 API 的数组，returns 以下示例信息：

      {
        "$type": "Example",
        "id": 0,
        "statusSeverity": 10,
        "statusSeverityDescription": "Good Service",
        "created": "0001-01-01T00:00:00",
        "validityPeriods": [
          
        ]
      }
    ],

我正在尝试根据“statusSeverityDescription”结果在 React 中设置 Bootstrap 按钮的“颜色”类型。尝试以下三元操作将其分配为“良好服务”的 btn-success，以及其他任何 btn-warning：

{lineStatuses.map(status =>
  <Button
    style ={{color : status.statusSeverityDescription === "Good Service" ? 'btn-success' : 'warning' }}
  >
  <h4>{status.statusSeverityDescription}</h4>

  </Button>
)}

H4 文本显示正常，因此它正在从 lineStatuses 获取信息，但按钮似乎默认显示为“btn-secondary”。此外，查看 React dev 中按钮的道具，它说“style”有{color：“btn-success”}。如果我可以远程设置 style 属性似乎会起作用，但似乎必须要有一些东西。

感谢您提供的任何帮助。

Answer 1

您正在尝试使用 Bootstrap class 名称设置颜色样式属性。

  <Button
    className={status.statusSeverityDescription === "Good Service" ? 'btn-success' : 'warning'}>
       <h4>{status.statusSeverityDescription}</h4>

  </Button>

Answer 2

对于bootstrap

<Button className={status.statusSeverityDescription === "Good Service" ? 'btn-success' : 'btn-warning'}>Primary</Button>

对于react-bootstrap react-bootstrab 按钮更改基于名为 variant 的道具，如文档所述

代码可能如下所示

<Button variant={status.statusSeverityDescription === "Good Service" ? 'success' : 'warning'}>Primary</Button>

映射到数组，我试图根据响应更改 Bootstrap 按钮的 "color" 参数

Mapping over an array, and I'm trying to alter the "color" parameter of a Bootstrap button based on response

reactjs

bootstrap-4

jsx

reactstrap