反应fontawesome 5 SVG没有重新渲染

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 组件是有效的。