React - FontAwesomeIcon из переменной

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

Вы можете сделать код declarative (как React), переместив состояние в собственный объект, сделав его настраиваемым (вместо обязательного if s).

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 2

Я думаю заменить

faIcon = { faExclamationTriangle }.faExclamationTriangle;

faIcon = { faCheckCircle }.faCheckCircle;

на

faIcon = faExclamationTriangle;

faIcon = faCheckCircle;

решит вашу проблему.

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} />;
    } 
  };
}