使用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 rerender触发器上重新渲染.如果你没有使用新的字体 - 真棒svg/javascript图标,你可以使用font-awesome作为带有css的webfont.

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

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

您的代码现在应该可以使用

另一种可能性是使用官方字体 - 真棒反应包(它有点麻烦,但它使用新的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 repo:https://github.com/FortAwesome/react-fontawesome

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

Answer 2

由于FA 5将svg元素注入到DOM中,因此它可能与React的虚拟DOM不能很好地兼容.希望这是他们将要修复的东西,但一个简单的解决方法是只包括两个图标而不是切换它们,并通过将其包装在适用的容器中来隐藏其中一个或另一个display: none.例如:

renderChatButton() {
  const unread = this.state.unread
  const normalIcon = <i className='far fa-comment' />
  const unreadIcon = <i className='fas fa-comment' />
  return (
    <div className='header-button' onClick={ this.toggleChat }>
      <span className={ unread ? 'hidden' : '' }>{ normalIcon }</span>
      <span className={ unread ? '' : 'hidden' }>{ unreadIcon }</span>
    </div>
  )
}

Answer 3

根据上面的讨论，这可能是一个非常棒的错误，而不是一个反应错误