React fontawesome 5 SVG不重新渲染答案

【问题标题】：React fontawesome 5 SVG not rerenderingReact fontawesome 5 SVG不重新渲染
【发布时间】：2018-05-23 04:45:54
【问题描述】：

我正在使用带有 React 的 Fontawesome 5 的专业许可证，并且我为 div 表中的标题单元格创建了一个行标题组件。该单元格具有用于排序图标的 Fontawesome 生成的 svg。我无法让 SVG 重新渲染。

这是我的代码：

export const row = (value, className, clickHandler) => (
  <div className={`align-self-center text-center ${className ? className : ''}`} onClick={clickHandler}>
    {value}
  </div>
);

export const rowHeader = (value, className, sort, clickHandler) => {
  let iconClass;
  switch (sort) {
    case 'asc':
      iconClass =  'fas fa-sort-up';
      break;
    case 'desc':
      iconClass = 'fas fa-sort-down';
      break;
    default:
      iconClass = 'fal fa-sort';
      break;
  }

  return row(<span>{value} {iconClass} <i className={iconClass + ' float-right'}/></span>, className +  ' clickable', clickHandler);
};

我尝试将<i .../> 创建为单独的组件，但没有成功。图标第一次正确呈现，iconClass 正在我的单元格中更改。但是，SVG 元素不会被重新渲染。

当父元素重新渲染时，如何强制 Fontawesome 生成的 SVG 图标重新渲染？

【问题讨论】：

作为临时工作，我在npmjs.com/package/@fortawesome/react-fontawesome 和@fortawesome/fontawesome-free-solid 一起使用NPM 包。这适用于实心图标，但我喜欢使用专业许可证中包含的光图标。我在上面的代码中都使用了。
是的，我撒了谎。只有这样的作品。第一次切换 SVG 图标，但之后它们不会重新呈现...

标签： reactjs svg font-awesome

【解决方案1】：

我的解决方案是将 key={Math.random()} 添加到 SVG 的包含元素中。然后，当它获得新的道具时，它会强制刷新。

【讨论】：

当重新渲染在 SVG 中不起作用时，这个对我有用
可以使用 ID 和状态描述符代替使用随机数，例如问题源中提到的 sort 变量，因此 key 将是例如price-row-icon-asc。我认为这看起来不那么骇人听闻。 ;)
2 1/2 半年后，这是对我帮助最大的解决方案。作为key，我使用了一个模板字符串，其中包含我想要反应的所有属性。非常感谢！

【解决方案2】：

这是最终奏效的解决方案。我能够找到使用我的专业许可证的文档。

import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { faSortDown, faSortUp } from '@fortawesome/fontawesome-pro-solid';
import { faSort } from '@fortawesome/fontawesome-pro-light';

export const row = (value, className, clickHandler) => (
  <div className={`align-self-center text-center ${className ? className : ''}`} onClick={clickHandler}>
    {value}
  </div>
);

export const rowHeader = (value, className, sort, clickHandler) => {
  return row(<span>{value} {sortIcon(sort)}</span>, className +  ' clickable', clickHandler);
};

export const sortIcon = (sort) => {
  switch (sort) {
    case 'asc':
      return <FontAwesomeIcon icon={faSortDown} size='lg' className='float-right'/>;
    case 'desc':
      return <FontAwesomeIcon icon={faSortUp} size='lg' className='float-right'/>;
    default:
      return <FontAwesomeIcon icon={faSort} size='lg' className='float-right'/>;
  }
};

编辑 - 澄清：

问题似乎是在渲染的 SVG 元素上更改 CSS 类名称不会导致 React 重新渲染它们。切换到 React Fontawesome 库并更新 FontAwesomeIcon 组件有效。

【讨论】：

您能在此处隔离修复，以便我们快速找到它吗？谢谢！

【解决方案3】：

这不起作用的原因是因为 svg&js 风格的 Font Awesome 使用了 MutationObserver，它将所有图标元素替换为 svg 元素。

这意味着 DOM 将被操纵，如果您使用 React 来渲染 DOM，这将导致麻烦。你的图标没有重新渲染，仅仅是因为 React 不再能够在 DOM 中找到它们，因为 Font Awesome 库已将原始元素替换为 svg 元素。这也可能导致其他问题，请参阅此问题：Failed to execute 'removeChild' on 'Node' with FontAwesome in React

要解决此问题，您可以使用您在自己的答案中已经提到的 @fortawesome/react-fontawesome 库，或者，如果您像我一样不喜欢冗长（并且必须使用私人 npm 存储库，呃）在这种方法中，您可以简单地使用 webfonts&css 风格，您的问题将在不更改代码的情况下得到解决。

【讨论】：

【解决方案4】：

我没有使用 key={Math.random()}，而是使用记录中的PRIMARY KEY

【讨论】：