Question

我正在使用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图标重新渲染？

Answer 1

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

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

Answer 3

之所以不起作用，是因为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回购协议， ugh），您只需使用webfonts＆css样式即可解决问题，而无需更改代码。

反应fontawesome 5 SVG没有重新渲染

3 个答案: