React fontawesome 5 SVGが再レンダリングされない

Question

私は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アイコンを再レンダリングさせるにはどうすればよいですか？

Answer 1

これは最終的に機能した解決策です。プロライセンスを使用するためのドキュメントを見つけることができました。一時的な作業として

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'/>; 
    } 
};