javascript - 我如何有条件地在 react 中渲染 Font Awesome 图标

Question

我正在尝试有条件地渲染 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;

Answer 1

FontAwesomeIcon 中的

icon 属性不需要对象，而是图标。您实际要做的是传递一个对象，其 key 等于 faSolidHeart 并且它的值为 faHeart 图标。

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

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