合并 mixin 外部属性宽度内部声明的属性而不复制 Pug 中的 "class" 键

Question

在下面的代码中，我需要将所有 InputField、InputField-TestClass 和 InputField-TestClass2 类应用到 [=19= 中的根 div ] 混合：

mixin CompoundControlBase(propertiesObject)
  div&attributes({
    foo: someInternalAttribute
  }, attributes)
    // ...


mixin InputField(propertiesObject)

  const {
    CSS_Namespace
  } = propertiesObject

  +CompoundControlBase({
    // ...
  })&attributes({
    class: [
      CSS_Namespace,
      `${CSS_Namespace}-TestClass`,
    ]
  }, attributes)


+InputField({
  CSS_Namespace: "InputField"
}).InputField-TestClass2

我想使用 &attributes 文字来避免属性重复，如下所示（基本上 Pug 可以处理它，但有时可能是 linting 警告之类的问题）：

// Please, don't
+CompoundControlBase({
    // ...
  })(
    class= CSS_Namespace
    class=`${CSS_Namespace}-TestClass`
  )(attributes)

不幸的是，Pug 不理解传播运算符：

+CompoundControlBase({
    // ...
  })&attributes({
    class: [
      CSS_Namespace,
      `${CSS_Namespace}__OneMoreClass`,
    ],
    ...attributes 
  })

// Error: Unexpected token (xxxx:xxxx)

在这里，CSS_Namespace和${CSS_Namespace}-TestClass将被忽略：

mixin InputField(propertiesObject)

  const {
    CSS_Namespace
  } = propertiesObject

  +CompoundControlBase({
    // ...
  })&attributes({
    class: [
      CSS_Namespace,
      `${CSS_Namespace}-TestClass`,
    ]
  }, attributes)

Answer 1

扩展我的评论，您应该能够按如下方式重写 InputField mixin：

mixin InputField(propertiesObject)

  - const { CSS_Namespace } = propertiesObject

  +CompoundControlBase({...})(class=`
      ${CSS_Namespace}
      ${CSS_Namespace}-TestClass
    `)&attributes(attributes)

如果此时您想更轻松地添加多个类，我建议您这样：

mixin InputField(args)
  -
    const { CSS_Namespace } = args
    const classesToNamespace = [
      'TestClass1',
      'TestClass2',
      'TestClass3'
    ]
    const classArray = classesToNamespace.map(name => `${CSS_Namespace}-${name}`)
    classArray.push(CSS_Namespace)

  +CompoundControlBase({...})(class=classArray)&attributes(attributes)

合并 mixin 外部属性宽度内部声明的属性而不复制 Pug 中的 "class" 键

Merge mixin external attributes width internally declared attributes without duplicating "class" key in Pug

pug