映射数组，我正在尝试根据响应更改 Bootstrap 按钮的“颜色”参数答案

【问题标题】：Mapping over an array, and I'm trying to alter the "color" parameter of a Bootstrap button based on response映射数组，我正在尝试根据响应更改 Bootstrap 按钮的“颜色”参数
【发布时间】：2020-11-28 03:50:48
【问题描述】：

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

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

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

我正在尝试根据“statusSeverityDescription”结果在 React 中设置引导按钮的“颜色”类型。尝试以下三元操作将其分配为“良好服务”的 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 中按钮的道具，它说“样式”具有 {color:“btn-success”}。如果我可以远程设置样式属性，它似乎会起作用，但似乎必须有一些东西。

感谢您提供的任何帮助。

【问题讨论】：

你应该设置className属性而不是设置样式
我试过了，但是按钮得到的类是“color btn btn-secondary”。
哦，对不起，这是反应引导程序。我会更新答案

标签： reactjs bootstrap-4 jsx reactstrap

【解决方案1】：

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

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

  </Button>

【讨论】：

非常感谢。做到了。感谢您的帮助！
有趣的是，您使用“className”的第一个答案有效，但“variant”无效。
所以，我会恢复。我以为你使用 react bootstrap
我应该提到是的，我的错。它是 reactstrap。
因此，您可以使用“color”属性 color={status.statusSeverityDescription ===“Good Service”来代替 className 吗？ “成功”：“警告”}

【解决方案2】：

用于引导

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

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

代码可能如下所示

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

【讨论】：

谢谢，但这会导致编译结果中出现这个结果：按钮是灰色的。但是谢谢你的帮助。编辑：我相信这是因为我使用的是 react-strap，而不是 react-bootstrap。对困惑感到抱歉。我已经修改了问题。
随时欢迎您.. 我认为您只需将变体更改为 className 和 reactstrap 提供的名称