react-icon-tint库IconTint组件canvas实现下动态改色失效如何处理？

可以动态修改<IconTint />的颜色，你遇到的问题是该库默认未监听color属性变化触发canvas重绘，加上React的Diff算法默认复用同类型组件实例导致的，按以下方案即可解决：

• 最简方案：给IconTint组件绑定随isActive变化的key属性，强制React在状态变更时销毁原有组件实例，创建全新实例完成canvas重绘，无需写冗余的条件判断：

<IconTint 
  key={isActive} 
  src={getCustomIcon()} 
  color={isActive ? icon : iconOnBackground} 
/>

• 如果你需要保留原有的条件渲染写法，分别给两个IconTint组件设置不同的固定key即可：

{
  isActive ? (
    <IconTint key="active-icon" src={getCustomIcon()} color={icon} />
  ) : (
    <IconTint key="inactive-icon" src={getCustomIcon()} color={iconOnBackground} />
  );
}

• 若加key后仍有偶现不生效的情况，大概率是图标资源缓存导致的，可给src加临时查询后缀触发canvas重新加载资源：

<IconTint 
  key={isActive} 
  src={`${getCustomIcon()}?t=${Number(isActive)}`} 
  color={isActive ? icon : iconOnBackground} 
/>

内容的提问来源于stack exchange，提问作者Oleksandr Fomin