Сonditional wrapper inside mixin答案

【问题标题】：Сonditional wrapper inside mixinСonditional wrapper inside mixin
【发布时间】：2020-08-11 21:48:31
【问题描述】：

mixin step(arr)
  each item in arr
    .step__item.col-md.col-sm-6
       .step__icon
          i(class=item.icon)
       .step__text=item.text

arr 是一个对象数组。如果在对象中定义了特定属性，我想为.step__item 添加条件包装器。如何在不将 else 语句中的整个代码加倍的情况下做到这一点：

mixin step(arr)
  each item in arr
    if item.prop !== undefined
      .wrapper
        .step__item.col-md.col-sm-6
          .step__icon
            i(class=item.icon)
          .step__text=item.text
    else
      .step__item.col-md.col-sm-6
        .step__icon
          i(class=item.icon)
        .step__text=item.text

【问题讨论】：

标签： pug

【解决方案1】：

这是另一个 Pug mixin 的一个很好的用例，可以从你原来的 mixin 中调用：

mixin wrapper(condition)
  if condition
    .wrapper
      block
  else
    block

mixin step(arr)
  each item in arr
    +wrapper(item.prop !== undefined)
      .step__item.col-md.col-sm-6
        .step__icon
          i(class=item.icon)
        .step__text=item.text

wrapper mixin 的内容将被传递给它的块语句，并且 .wrapper 元素只有在你作为 mixin 的参数传递的任何条件评估为 true 时才会使用。

【讨论】：

是否有可能为父级创建内联条件？ !item.prop ? '' : wrapper 之类的东西？
不，不是不添加元素。

【解决方案2】：

是否有可能为父母制定内联条件？就像是 !item.prop ? '' : wrapper?

你可以，但这也会在你的 else 条件下添加一个包装 div。

mixin step(arr)
  each item in arr
    div(class=(item.prop !== undefined ? 'wrapper': ''))
      .step__item.col-md.col-sm-6
        .step__icon
          i(class=item.icon)
        .step__text=item.text

【讨论】：