如何为类名组合字符串 + javascript？ [复制]

Posted 2023-02-22

【中文标题】如何为类名组合字符串 + javascript？ [复制]

【英文标题】：How do I combine a string + javascript for a className? [duplicate]

【发布时间】：2017-05-15 18:00:43

【问题描述】：

如何将 javascript 变量与字符串组合？我必须连接变量吗？

 /* JSX + Bootstrap */ 
<div className=s.container + "col-md-offset-4 col-md-4 well">

编辑：感谢您的帮助。这是我遇到的错误

<div className='col-md-offset-4 col-md-4 well' + s.container>
// Error: Unexpected string concatenation

感谢您的建议...这是我在关注这些文档时遇到的错误http://eslint.org/docs/2.0.0/rules/prefer-template

Module build failed: SyntaxError: JSX value should be either an expression or a quoted JSX text (23:23)

  21 |     return (
  22 |       <div className=s.root>
> 23 |         <div className=`col-md-offset-4 col-md-4 well $s.container`>

【问题讨论】：

你可以看这里，因为它看起来很相似，***.com/questions/4234533/…

说“意外的字符串连接”

我们能看到更多代码吗？这个错误没有多大意义——你是在使用 linter 还是什么？

是的，eslint。我将对更多代码进行编辑。谢谢！

改用className=`col-md-offset-4 col-md-4 well $s.container`>...

【参考方案1】：

@Poke 和@Andrew Li 发现这一点值得称赞。您需要遵循文档，但也需要将其放在带有大括号的 javascript 中

<div className=`col-md-offset-4 col-md-4 well $s.container`>

【讨论】：

有些日子，我认为那些反引号是 javascript 中字符串发生的最好的事情。它比发送+ 符号或在字符串数组上使用join 要简洁得多。