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

Question

因此，我目前拥有的代码可以正常工作，但是我收到了preferred 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}`]}`}>

超级丑陋，而且行不通，将需要更优雅的解决方案。

Answer 1

这个怎么样

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

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

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