0

我目前正在构建一个自定义英雄块。我添加了一个 ToggleControl 来隐藏或显示此块中的内容。这确实适用于古腾堡块中的编辑部分，它还需要向包装器添加一个类。这也适用于编辑部分。

奇怪的是，它不适用于块的保存部分。我用来设置类的代码如下：

它确实按编辑部分的预期工作

edit: function( props ) {
    const { attributes, className } = props;

    const wrapperStyle = {
        backgroundColor: attributes.backgroundColor,
        backgroundImage: attributes.backgroundImage && 'url(' + attributes.backgroundImage + ')',
    };

    const classes = classnames(
        className,
        dimRatioToClass( attributes.backgroundOpacity ),
        {
            'has-background-dim': attributes.backgroundOpacity !== 0,
        },
        attributes.position,
        { [ `align${ attributes.align }` ]: attributes.align && attributes.fullWidthBackground },
        { [ `has-${ attributes.includeContent ? 'content' : 'no-content' }` ] : attributes.includeContent },
    );

    return (
        <Fragment>
            <Inspector { ...props } />
            <div style={ wrapperStyle } className={ classes }>
                <div className="wrapper-inner">
                    <div className="wrapper-inner-blocks">
                     { attributes.includeContent === true &&
                        <InnerBlocks />
                     }
                    </div>
                </div>
            </div>
        </Fragment>
    );
},

但是在保存部分没有应用样式并且条件标签不起作用。请参阅下面的代码。

我错过了什么吗？

save: function( props ) {
    const { attributes, className } = props;

    const wrapperStyle = {
        backgroundColor: attributes.backgroundColor,
        backgroundImage: attributes.backgroundImage && 'url(' + attributes.backgroundImage + ')',
    };

    const classes = classnames(
        className,
        { [ `has-${ attributes.includeContent ? 'content' : 'no-content' }` ] : attributes.includeContent },
        { [ `align${ attributes.align }` ]: attributes.align && attributes.fullWidthBackground },
        dimRatioToClass( attributes.backgroundOpacity ),
        {
            'has-background-dim': attributes.backgroundOpacity !== 0,
        },
        attributes.position,
    );

    return (
        <div style={ wrapperStyle } className={ classes }>
            <div className="wrapper-inner">
                <div className="wrapper-inner-blocks">
                    { attributes.includeContent === true &&
                        <InnerBlocks.Content />
                    }
                </div>
            </div>
        </div>
    );
}

});

4

1 回答 1

0

我不能发表评论，所以，我必须发布这个答案：/

我猜attributes.includeContent道具是 ToggleControl 是问题，是吗？

它是否在属性中设置为布尔值？

当你 console.log 保存时你会得到什么？当你 console.log 保存它的类型时呢？我只是想知道它是否最终会作为一个字符串评估为真。

于 2019-01-31T14:38:59.890 回答