Question

所以我目前的代码是有效的，但是我收到了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]}`}>

仅供参考，这是一个名为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} />

另一个模板字符串文字

1 个答案: