WordPress

Question

我正在开发一些自定义块，以便根据我们网站的视觉指南轻松构建页面。

我的问题很简单：我们如何创建一个条件语句，如果为真则向页面添加一个元素，如果为假则什么也不做？

代码在这里

// parent block    
el(
'div',
{className:'block-hero__linkbox'},
// conditional child block that is shown only if attributes.linked1text is not blank                
attributes.link1text ? el('a', {className:'block-hero__links 
txt_colorwhite',href:attributes.link1href},attributes.link1text.concat(' »'),), : null,
// other stuff to follow
)

提前致谢

Answer 1

要有选择地呈现元素，请将 Conditional Rendering 与逻辑运算符 && 结合使用，例如：

el('div', { className: 'block-hero__linkbox' },
<p>
    {attributes.link1href && // if link1href evaluates to "true"
        el('a', // render this
            {
                className: 'block-hero__links txt_colorwhite',
                href: attributes.link1href
            },
            attributes.link1href // the link content
        )}
            Other content..
            </p>)

如果没有默认值或属性 link1href 的值等于 false，则不会呈现 link。

WordPress - 自定义块 JS 中的条件语句

WordPress - conditional statement in custom block JS

javascript

wordpress-gutenberg