3

在以下示例中，初始图标呈现，但在类更改时它不会更改。

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>

4

3 回答 3

9

BO41 是对的，它是字体很棒的 javascript，不会重新渲染。如果您可以不使用新的 font-awesome 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">

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

另一种可能性是使用官方的 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

于 2017-12-23T20:50:20.850 回答
1

您可以配置 fontawesome 将 svg 嵌套在<i>标签内。这种方式 react 可以重新渲染它。

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

嵌套标签而不是替换 在某些情况下，标签的替换可能无法如您所愿。

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

我们从一个 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>
于 2018-02-28T14:41:35.337 回答
0

我假设您需要重新触发 font awesome javascript 来呈现新图标。如果您使用带有标签的真实图像，它会像您预期的那样工作

于 2017-12-23T16:53:06.787 回答