我正在使用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风格,您的问题将在不更改代码的情况下得到解决。