如何在反应中有条件地渲染字体真棒图标答案

【问题标题】：How do I conditionally render font awesome icons in react如何在反应中有条件地渲染字体真棒图标
【发布时间】：2020-04-09 09:46:27
【问题描述】：

我正在尝试从 font awesome 有条件地渲染空心和完整的心形图标。

我正在关注一个教程，但他们使用的是 font awesome 4.7

import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart as faEmptyHeart } from "@fortawesome/free-regular-svg-icons";
import { faHeart as faSolidHeart } from "@fortawesome/free-solid-svg-icons";

//Input: liked: boolean
//Outpur: onClick

class Like extends Component {
  render() {
    let classes = { faSolidHeart };
    if (!this.props.liked) classes = { faEmptyHeart };
    return <FontAwesomeIcon icon={classes} />;
  }
}

export default Like;

【问题讨论】：

标签： javascript reactjs font-awesome jsx

【解决方案1】：

FontAwesomeIcon 中的icon 属性不期望对象，而是图标。你实际上做的是传递一个key等于faSolidHeart的对象，它的值是faHeart图标。

只需删除大括号即可。下面是一个简化和缩短的解决方案：

class Like extends Component {
  render() {
    return <FontAwesomeIcon icon={this.props.liked ? faSolidHeart : faEmptyHeart} />;
  }
}

【讨论】：