在 React 中根据条件更改 Toast 图标颜色答案

【问题标题】：Change Toast icon color conditional in React在 React 中根据条件更改 Toast 图标颜色
【发布时间】：2020-06-22 17:03:51
【问题描述】：

我想使用条件更改 toast 组件的图标。我正在尝试使用三元运算符，但不工作。任何人都可以帮助我吗？我有以下想法：

renderResultadoManifestacao(){
  var tag = '';
  const listItems = this.state.resultList.map((d) => 
  //<li key={d.name}>{d.name}</li>);
    <Toast>
      {d.success == true ? tag = "success" : tag = "error" }
      <ToastHeader icon = {tag}> {d.chaveAcesso} </ToastHeader>
      <ToastBody>
        {d.resultado.map((r) =>
          <li key={r}>{r}</li>
        )}
      </ToastBody>
    </Toast>
  );

  return (
    <div>
      {listItems }
    </div>
  );
}

【问题讨论】：

也许只是删除顶部 tag 变量之前的 const 关键字，因为您试图在您的条件下替换它的内容
我能够毫无错误地执行您的代码。你的期望是什么？以下是codepen codepen.io/munikumarofficial/pen/WNvMeGx

标签： react-native react-bootstrap reactstrap

【解决方案1】：

您可以在map 的函数中设置tag 变量。

renderResultadoManifestacao(){
        const listItems = this.state.resultList.map((d) => {
            var tag = d.success ? "success" : "error";
            return <Toast>
                {tag}
                <ToastHeader icon = {tag}> {d.chaveAcesso} </ToastHeader>
                <ToastBody>
                    {d.resultado.map((r) =>
                        <li key={r}>{r}</li>
                    )}
                </ToastBody>
             </Toast>
        });

        return (
            <div>
                {listItems}
            </div>
        );

}

【讨论】：