另一個模板字符串文字內的模板字符串文字

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} />