javascript - 有时会嵌入错误的 svg。在React/Redux/Webpack项目中使用react-inlinesvg

Question

这是一个奇怪的问题，我在寻找可能的解决方案时遇到了问题。

我正在开发一个 React/Redux/Webpack 项目，我们使用 react-inlinesvg 来处理 svg。

问题:

有时我正在开发的应用程序会渲染错误的 svg。这是带有示例的图片:

Example of the behavior

正确的图标是顶层和底层的图标(“编辑”和“关闭/删除”按钮)，但是如果您查看中间的层，则呈现的图标不是正确的。

重要信息:

如果我执行更新 svg 图标出现的组件的操作，我可以重现此行为，但并非全部显示错误，只是 1 或 2 个随机 div。如果我刷新页面，图标就会以正确的方式显示。

这是使用react-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...
    ])
};

我想请您帮助理解为什么会发生这种情况以及可能的解决方案？

与 React 更新组件的方式有关吗？服务器有任何问题/速度缓慢吗？

我还可以向您提供哪些其他信息来帮助您帮助我？

感谢您的时间和帮助!

Answer 1

我遇到了同样的问题，并且来自于 react-inlinesvg 如何使用 shouldComponentUpdate。基本上，如果 src 发生变化，它不会重新渲染。您可以尝试随机化 key 。就我个人而言，我切换到了 react-svg