Question

我要在函数上有条件地选择图标，但是当我尝试渲染它时会失败...

这是我正在尝试的：

  getResult = item => {
    let variant;
    let faIcon;
    if (item.result === "UNSTABLE") {
      variant = "#ffc107";
      faIcon = { faExclamationTriangle }
    } else if (item.result === "SUCCESS") {
      variant = "#009688";
      faIcon = { faCheckCircle }
    } 

    return <FontAwesomeIcon size="2x" icon={faIcon} color={variant} />;
  };
}

也尝试过此操作

  getResult = item => {
    let variant;
    let faIcon;
    if (item.result === "UNSTABLE") {
      variant = "#ffc107";
      faIcon = <faExclamationTriangle/>;
    } else if (item.result === "SUCCESS") {
      variant = "#009688";
      faIcon = <faCheckCircle/>
    } 

    return <FontAwesomeIcon size="2x" icon={faIcon} color={variant} />;
  };
}

这只能以这种方式工作，但是很难看……

getResult = item => { 
    let variant;
    let faIcon;
    if (item.result === "UNSTABLE") {
      variant = "#ffc107";
      faIcon = { faExclamationTriangle }.faExclamationTriangle;
    } else if (item.result === "SUCCESS") {
      variant = "#009688";
      faIcon = { faCheckCircle }.faCheckCircle;
    } 

    return <FontAwesomeIcon size="2x" icon={faIcon} color={variant} />;
  };
}

确定问题出在某些概念上...

Answer 1

我认为要替换

faIcon = { faExclamationTriangle }.faExclamationTriangle;

faIcon = { faCheckCircle }.faCheckCircle;

使用

faIcon = faExclamationTriangle;

faIcon = faCheckCircle;

将解决您的问题。

Answer 2

您可以通过将状态移动到其自己的对象中（使其成为可配置的（而不是强制性的declarative））来制作代码if（就像React一样）。

const iconMap = {
    "UNSTABLE": {
        color: "#ffc107",
        icon:  { faExclamationTriangle }
    },
    "SUCCESS": {
        color: "#009688",
        icon:  { faCheckCircle }
    },
}


getResult = item => <FontAwesomeIcon size="2x" 
        color={iconMap[item.result].color} 
        icon={iconMap[item.result].icon} />;
    // if you want to pass all props...
    // <FontAwesomeIcon size="2x" {...iconMap[item.result]} />;

添加支持的新状态只需在iconMap中添加新对象即可。

实际上，以上内容类似于Material-UI和Styled-Components允许您更新主题的方式。

Answer 3

这应该有效：

getResult = item => { 
    let variant;
    let faIcon;
    if (item.result === "UNSTABLE") {
        return <FontAwesomeIcon size="2x" icon={{ faExclamationTriangle }.faExclamationTriangle} color={variant} />;
    } else if (item.result === "SUCCESS") {
        return <FontAwesomeIcon size="2x" icon={{ faCheckCircle }.faCheckCircle} color={variant} />;
    } 
  };
}

反应-来自变量的FontAwesomeIcon

3 个答案: