reactjs - html 中的类中有太多空格会导致任何问题/性能问题吗？

Question

我正在为 jsx 中的一个元素分配多个条件类。行太长，不可读，所以我把它分成多行。由于我使用的是模板文字，因此由于换行符导致的空格也是结果字符串的一部分。

模板：

<span
  className={`${classes.voucherStatus} 
              ${statusTypes.ok.includes(voucherStatus) ? classes.voucherSuccessMessage : ''} 
              ${statusTypes.error.includes(voucherStatus) ? classes.voucherErrorMessage : ''}`}
>
  {voucherStatus}
</span>

这看起来像呈现的 html：

我认为我的“解决方案”比其他人建议的更具可读性。

我的问题是：以我的方式创建课程有什么缺点吗？

标签： reactjsformattingjsxclassnametemplate-literals

Answer 1

我能想到的唯一缺点是如果您尝试使用属性选择器来访问类属性。

例如：

<span class="classOne      classTwo"></div>

/* doesn't work */
[class='classOne classTwo'] {

}

/* this works */
[class='classOne      classTwo'] {

}