另一个模板字符串文字内的模板字符串文字答案

【问题标题】：Template string literal inside of another template string literal另一个模板字符串文字内的模板字符串文字
【发布时间】：2016-05-11 07:29:45
【问题描述】：

所以我目前拥有的代码可以工作，但我收到prefer-template: Unexpected string concatenation ESLINT 错误，我想通过可能知道使用模板字符串文字执行此操作的正确方法来避免该错误。

这是我现在拥有的代码：

<div className={`${styles.dataGridHeader} ${styles['columns' + this.props.data.headers.length]}`}>

我想根据数据报告中的列数应用一个类column1、column2、column3、etc，以便我可以对这些元素应用一些特定的样式。

我有什么工作，但是有没有办法避免使用连接而只使用模板字符串文字？

例如：

<div className={`${styles.dataGridHeader} ${styles[`columns${this.props.data.headers.length}`]}`}>

超级丑陋，而且不工作，会喜欢更优雅的解决方案。

【问题讨论】：

我不确定它在 JSX 中的表现如何，但总的来说，虽然不是很漂亮，但嵌套的模板字符串应该可以工作。
也许这是 JSX 特有的，但似乎没有使用额外的变量，表达式中的反引号会相互终止？
你能详细说明“它不起作用”吗？究竟是什么不工作？你有错误吗？ It works just fine in the Babel REPL.
@FelixKling 意外令牌错误，JSX 在第一个反引号处终止表达式，这不是预期的吗？
@Steven：嗯，正如我所展示的，Babel 可以很好地正确地转换它。也许您使用的是过时的版本？语法本身（没有 JSX）在 ES6 中有效（至少这在 Chrome 中可以正常工作：`foo${`bar`}`）

标签： javascript ecmascript-6

【解决方案1】：

这个怎么样

const nColumn = 'columns' + this.props.data.headers.length
<div className={`${styles.dataGridHeader} ${styles[nColumn]}`}>

仅供参考，有一个很棒的库，名为 classnames，它应用于您的代码，看起来像这样

import classNames from 'classnames'
const nColumn = 'columns' + this.props.data.headers.length
const divCls = classNames({
  [`${styles.dataGridHeader}`]: true,
  [`${styles[nColumn]}`]: true
})
<div className={divCls} />

【讨论】：

我会看看类名，但你的答案是正确的，显然${} 在花括号内绑定了任意数量的可用变量，希望有一种优雅的方式不过，在不使用其他变量的情况下内联执行此操作。
@StevenBennett：你的代码看起来不错。请详细说明“它不起作用”。