使用React切换Font Awesome 5图标 [英] Toggling Font Awesome 5 icon with React

问题描述

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

I am trying to toggle a Font Awesome icon by clicking on a to-do list item. Here is the entire component...

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（直接来自网站）......

Here's my FA 5 CDN (straight from the website)...

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

我拍了几张React开发工具和检查员的截图......

I've taken a few screenshots of the React dev tool and inspector...

这是React组件，但不完整（默认值）

Here is the React component while incomplete (the default)

完成后......

And while complete...

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

And the two icon elements in the inspector, I noticed the one not being used by default is commented out.

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

As you can see, I'm able to manually toggle the complete state and the component changes in the React tool but the change is not rendered. I changed the default state to make sure both icons are loaded correctly and they are. I made a Codepen to try it in a different environment and this one works, but I am using the FA 4.7.0 CDN. With the Codepen and FA 4.7.0, when I inspect the icon, it is just an HTML element not SVG.

我想让这个组件与FA配合使用5所以任何帮助将不胜感激！

I'd like to get this component working with FA 5 so any help would be appreciated!

推荐答案

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

The font-awesome javascript doesn't rerender on a React rerender trigger. If you are okay with not using the new font-awesome svg/javascript icons, you can use font-awesome as a webfont with css.

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

In your index.html, delete the fontawesome script, and add the font-awesome css stylesheet:

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

您的代码现在可以使用。

Your code should work now.

另一种可能性是使用官方字体 - 真棒反应包（这有点麻烦，但它使用新的svg图标）

The other possibility is to use the official font-awesome react package (it's a bit more of a hassle, but it uses the new svg icons)

为项目添加必要的包：

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

See the github repo for more information: https://github.com/FortAwesome/react-fontawesome

这个答案是我的答案的编辑版本：如何让Font Awesome 5与React一起工作？。

This answer is an edited version of my answer here: How can I get Font Awesome 5 to work with React?.

这篇关于使用React切换Font Awesome 5图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！