reactjs - React 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 的包含元素中。然后，当它获得新的 props 时，它会强制刷新。