我该如何让Font Awesome 5在React中正常工作？

Question

在下面的例子中，初始图标将被呈现，但当类别改变时，它不会发生变化。

const Circle = ({ filled, onClick }) => {
  const className = filled ? 'fas fa-circle' : 'far fa-circle';
  
  return (
    <div onClick={onClick} >
      <i className={className} />
      <p>(class is {className})</p>
    </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} />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

- TrueWill

Answer 1

BO41是正确的，问题出在font-awesome的JavaScript上，它不会重新渲染。如果你可以不使用新的font-awesome SVG/JavaScript图标，可以使用带有CSS的font-awesome作为Web字体。

在你的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。

- brkn

---

你可能也想回答 https://dev59.com/8VYN5IYBdhLWcg3wQWTJ - 这些问题很相似（我会让其他人决定是否应该将其中一个关闭为重复）。 - TrueWill

我也在那里提交了我的答案，感谢您的提醒！ - brkn

Answer 2

你可以配置fontawesome，将svg嵌套在<i>标签内。这样React就可以重新渲染它。

https://fontawesome.com/how-to-use/svg-with-js

在某些情况下，替换标签不起作用，您可以嵌套标签。

您可以配置Font Awesome将i标签嵌套在span标签内。

我们从一个i标签开始。

<script>
  FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>
<i class="my-icon fas fa-coffee" data-fa-mask="fas fa-circle"></i>

最终结果是在原始 i 标签内部嵌套了一个 svg 标签。

<i class="my-icon" data-fa-mask="fas fa-circle" data-fa-i2svg="">
  <svg class="svg-inline--fa fa-coffee fa-w-16" data-fa-mask="fas fa-circle" aria-hidden="true" data-fa-i2svg="" data-prefix="fas" data-icon="coffee" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">...</svg>
</i>

- Mogari

Answer 3

我猜你需要重新触发font awesome的javascript代码来渲染新图标。如果你使用带有<img>标签的真实图片，它将按照你的意图工作。

- user9112752

---

请您能否提供一个例子？ - TrueWill

很抱歉，但我只使用了CSS版本。你需要查看JS源代码，看看是否有一种方法可以重新渲染所有内容。否则，除了重新加载页面之外，我认为你没有其他机会。（也许可以为图标放置一个iframe并重新加载它） - user9112752

Answer 4

虽然这是一个老问题，但我相信可以通过使用key属性来解决：

  <div key={Math.random()} onClick={onClick} >
      <i className={className} />
      <p>(class is {className})</p>
  </div>

这将强制React更新您的div，然后您将获得预期的行为并继续像以前一样使用该库;

- Elmer Dantas