React - FontAwesomeIcon из переменной
Я выбираю значок условно для функции, но когда я пытаюсь отобразить его, не получается ...
Вот что я пытаюсь:
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} />;
};
}
наверняка проблема в отсутствии какой-то концепции ...
Ответы 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} />;
}
};
}
Вы можете сделать код declarative (как и React), переместив состояние в его собственный объект, сделав его настраиваемым (вместо императивных if).
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.
Фактически, это похоже на то, как Материал-UI & Стилизованные компоненты позволяет вам обновлять ваши темы.
Другой ответ работает, но, на мой взгляд, это правильный подход! Спасибо!
Ах, я не знал, что причиной проблемы был {...} ... В любом случае, рад, что вы смогли решить проблему
Думаю заменить
faIcon = { faExclamationTriangle }.faExclamationTriangle;
faIcon = { faCheckCircle }.faCheckCircle;
с участием
faIcon = faExclamationTriangle;
faIcon = faCheckCircle;
решит вашу проблему.
это сработало! Спасибо! Можете ли вы объяснить или показать какой-нибудь документ, почему эта работа и мои тесты не работают?
Вы заключаете faExclamationTriangle, faCheckCircle в фигурные скобки, что является сокращенным синтаксисом ES6 для литерала объекта. { faExclamationTriangle } такой же, как { faExclamationTriangle: faExclamationTriangle }.
Да, конечно ... но это то, чего я пытался избежать ... у меня много вариантов, и нет смысла повторять <FontAwsome ...> каждый раз