Question

这是一个奇怪的问题，我找不到可能的解决方案。

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

问题：

有时，我正在处理的应用会导致错误的svg。这是一个带有示例的img：

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...
    ])
};

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

是否有反应更新组件的方式？任何服务器问题/缓慢？

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

感谢您的时间和帮助！

Answer 1

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

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

1 个答案: