反应fontawesome 5 SVG不重新描绘

Posted 2021-03-29

我正在使用React的Fontawesome 5的专业许可证，我在div表格中为标题单元格创建了一个行标题组件。该单元格为Fontawesome生成了用于排序图标的svgs。我无法让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图标重新渲染？

答案

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

另一答案

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

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组件。

另一答案

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

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

为了解决这个问题，您可以使用@fortawesome/react-fontawesome库，如您在自己的答案中已经提到的那样，或者，如果您喜欢我并且不喜欢这种方法的详细程度（并且不得不使用私有的npm repo，呃），那么可以简单地使用webfonts和css风格，您的问题将在不更改代码的情况下得到解决。