我如何有条件地在反应中呈现字体真棒图标

Question

我正在尝试有条件地从字体真棒中呈现空心和满心图标。

我正在学习教程，但他们使用的是字体真棒 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;

Answer 1

FontAwesomeIcon中的icon FontAwesomeIcon不需要一个对象，而是一个图标。 你实际上做的是传递一个key等于faSolidHeart的对象，它的值作为faHeart图标。

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

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