0

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

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

问题：

有时我正在开发的应用程序会呈现错误的 svg。这是一个带有示例的img：

行为示例

正确的图标是顶层和底部的图标（编辑和关闭/擦除按钮）但是如果您查看中间的图层，则呈现的图标不是正确的图标。

重要信息：

如果我执行更新出现 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 更新组件的方式有关？任何服务器问题/缓慢？

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

感谢您的时间和帮助！

4

1 回答 1

1

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

于 2017-02-13T15:27:50.873 回答