0

我创建了一个古腾堡块，部分输出是设置根元素的样式。我遇到了这个根元素的样式属性在更改时没有在古腾堡编辑器中动态更新的问题。我的编辑功能如下：

    edit: function( props )
    {
        [...] // initialising some variables

        return el(
            wp.element.Fragment,
            {},
            [...], // InspectorControls, etc.
            el(
                'div',
                {
                    className: 'cms-container ' + getClassName(attr),
                    style: getStyles(attr),
                    state:  JSON.stringify(getStyles(attr)) 
                },
                [...] // Inner blocks, etc.
            )
        );
    },

这在页面加载时效果很好，但是当我在页面上（通过 InspectorControls）更改 getStyles(attr) 返回的内容时，样式不会改变。我什至在输出中添加了一个额外的“状态”属性，它会按预期进行更改，结果如下所示：

<div class="cms-container " 
    style="background-size: contain;" 
    state="{&quot;backgroundSize&quot;:&quot;cover&quot;}">

我已将背景大小更改为覆盖，它在“状态”属性中更新，但不在样式中。如果此时我要保存页面，它将在下一页加载时正确呈现（作为背景大小：封面）。

React 是否有某种我缺少的缓存？

4

1 回答 1

0

我最终制作了 getStyles(attr) 返回的对象副本，从而解决了问题：

style: $.extend(true, {}, getStyles(attr))

我猜这些值在超出范围或其他内容后会发生变化。

于 2019-02-28T16:05:21.523 回答