javascript - 使用 React 切换 Font Awesome 5 图标

Question

我正在尝试通过单击待办事项列表项来切换 Font Awesome 图标。这是整个组件...

import React from 'react';

import './TodoItem.scss';

class TodoItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      complete: false
    }
    this.toggleComplete = this.toggleComplete.bind(this);
  }

  toggleComplete() {
    this.setState(prevState => ({
      complete: !prevState.complete
    }));
  }

  render() {
    const incompleteIcon = <span className="far fa-circle todo-item-icon"></span>;
    const completeIcon = <span className="far fa-check-circle todo-item-icon"></span>;

    return (
      <div className="todo-item" onClick={this.toggleComplete}>
        {this.state.complete ? completeIcon : incompleteIcon}
        <span className="todo-item-text">{this.props.item}</span>
      </div>
    );
  }
}

export default TodoItem;

这是我的 FA 5 CDN(直接来自网站)...

<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

我截取了一些 React 开发工具和检查器的屏幕截图...

这是未完成的 React 组件(默认)

完成后...

检查器中的两个图标元素，我注意到默认情况下未使用的那个被注释掉了。

如您所见，我可以在 React 工具中手动切换完整状态和组件更改，但不会呈现更改。我更改了默认状态以确保两个图标都正确加载并且确实如此。我做了一个Codepen在不同的环境中尝试它，这个有效，但是我使用的是 FA 4.7.0 CDN。使用 Codepen 和 FA 4.7.0，当我检查图标时，它只是一个 HTML 元素而不是 SVG。

我想让这个组件与 FA 5 一起工作，因此我们将不胜感激!

Answer 1

超棒的 javascript 不会在 React 重新渲染触发器上重新渲染。如果您可以不使用新的 font-awesome svg/javascript 图标，您可以使用 font-awesome 作为带有 css 的网络字体。

在您的 index.html 中，删除 fontawesome 脚本，并添加 font-awesome css 样式表:

<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">

您的代码现在应该可以工作了。

---

另一种可能是使用官方的 font-awesome react 包(有点麻烦，但它使用了新的 svg 图标)

为项目添加必要的包:

yarn add @fortawesome/fontawesome @fortawesome/react-fontawesome
yarn add @fortawesome/fontawesome-free-regular @fortawesome/fontawesome-free-solid

示例代码:

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCircle as fasCircle } from '@fortawesome/fontawesome-free-solid'
import { faCircle as farCircle } from '@fortawesome/fontawesome-free-regular'

const Circle = ({ filled, onClick }) => {

  return (
    <div onClick={onClick} >
      <FontAwesomeIcon icon={filled ? farCircle : fasCircle}/>
    </div>
  );
};

class App extends React.Component {
  state = { filled: false };

  handleClick = () => {
    this.setState({ filled: !this.state.filled });
  };

  render() {
    return <Circle filled={this.state.filled} onClick={this.handleClick} />;
  }
}

有关更多信息，请参阅 github 存储库:https://github.com/FortAwesome/react-fontawesome

这个答案是我在这里的答案的编辑版本:How can I get Font Awesome 5 to work with React? .