有时会嵌入错误的svg。使用反应-inlinesvg项目反应，和/终极版/的WebPack

这是一个奇怪的一个，我有问题，找到一个可行的解决方案。有时会嵌入错误的svg。使用反应-inlinesvg项目反应，和/终极版/的WebPack

我工作的一个反应，和/终极版/的WebPack的项目，我们正在使用react-inlinesvg处理SVG的。

问题：

有时，我工作的应用程序，使错误的SVG。下面是一个例子的IMG：

Example of the behavior

正确的图标是在顶层和底层的那些（A编辑和关闭/删除按钮），但如果你看看在该层中间呈现的图标不是正确的。

重要信息：

我可以重现此问题，如果我做一个更新，其中SVG图标显示组件中的作用，但不是所有出现错误的，只有1周或2个随机的div。如果我刷新页面，图标显示正确的方式。

下面是部分使用了反应，inlinesvg：

import React from 'react'; 
import InlineSVG from 'react-inlinesvg'; 
import classnames from 'classnames'; 

export default class Icon extends React.Component { 

    render() { 

     var IconClass = classnames('Icon', this.props.name); 
     var iconSrc = '/stylesheets/assets/icon-' + this.props.name + '.svg'; 

     return (
      <span className={IconClass} onClick={this.props.onClick}> 
       <InlineSVG key={this.props.name} cacheGetRequests={true} wrapper={React.DOM.i} src={iconSrc} /> 
      </span> 
     ); 
    } 
} 

Icon.propTypes = { 
    name: React.PropTypes.oneOf([ 
     'close', 
     'trash', 
     'edit', 
     'download', 
     'thumbsup', 
     'thumbsdown', 
     etc... 
    ]) 
};

我想请你帮助理解为什么这可能是发生和可能的解决方案？

它说的是对的方式作出反应的更新组件？任何服务器问题/缓慢？

我可以给其他什么信息，你来帮助你帮助我吗？

感谢您的时间和帮助！

来源

2017-02-13 pmrgnogueira

我有同样的问题，并来自react-inlinesvg如何使用shouldComponentUpdate。基本上，如果src更改，则不会重新渲染。你可以尝试随机化key。我个人切换到react-svg

来源

2017-02-13 15:27:50

感谢您回答这么快。我怎么能这样做随机化的关键？我将检查'反应，svg'，看看它是否工作。乍一看，它没有道具，其他人喜欢'cacheGetRequests'和'wrapper'，你是怎么处理这个的？ – pmrgnogueira

@pmrgnogueira我想'Math.random'可以做到这一点，但它也可能会损害性能。你也可以通过'src'作为关键。 –

有时会嵌入错误的svg。使用反应-inlinesvg项目反应，和/终极版/的WebPack

回答

相关问题