Question

所以我有这个组件渲染平铺的图像缩略图，包含在一个包含div。我还有一个设置对话框，我可以调整图像的填充。然而，当更新填充并将其发送到（所有）组件时，填充似乎被添加到相应的DOM元素，但是不使用调整的填充来重新渲染图像。的即。图像不会在div中重新调整。

在此设置任意逻辑中减去部分的组件如下：

class ImageThumbnailView extends React.Component {

    constructor(props){
        super(props);
        // Constructor stuff
    }

    // Some methods
    // ........

    render(){
        let style = {
            width: this.props.width,
            'padding-bottom': this.props.width,
            'margin-bottom' : this.rowSpacing,
        };

        let imgstyle = {
            padding: this.state.padding
        }

        /* To no avail
        let imgstyle = {
            'padding-left': this.state.padding,
            'padding-top': this.state.padding,
            'padding-right': this.state.padding,
            'padding-bottom': this.state.padding
        }*/

        return (
            <div className="folder-thumbnail" style={style} onClick={this.handleClick} onContextMenu={this.handleContextMenu}>
                <img style={imgstyle} src={this.props.tree.thumbnail} onLoad={this.fadeIn}></img>
            </div>
        );
    }

}

关联的（S）CSS如下：

div.folder-thumbnail {
    margin: 0;
    position: relative;
    float: left;
    overflow: hidden;
    transition: all 0.5s ease;

    img {
        display: none;
        position: absolute;
        width: auto;
        height: 100%;
        // z-index: -3;
    }

    &:hover {
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.5);
    }
}

所以我现在已经测试了很多，现在我已经清楚了以下内容：

故障不在逻辑中：this.state.padding变量已正确更新。
每次更新状态时都会调用render方法。
样式已正确添加到img-tag中，我可以从Developer Tools中看到它。
更新填充时，如果我更改某个导致图像以其他方式调整大小的变量，则也会重新渲染填充。

因此，我不太确定这是一个反应问题。如果不是我担心以前已经回答了，但我找不到任何东西。

事先，谢谢！

修改

似乎问题不会出现在Firefox中，而是出现在Chrome中。

不呈现图像填充的更新

0 个答案: