Template string literal внутри другого шаблона string literal

Question

Итак, код, который у меня есть в настоящее время, работает, но я получаю ошибку ESLINT prefer-template: Unexpected string concatenation, чего я бы хотел избежать, возможно, зная правильный способ сделать это с помощью строк шаблона литералы.

Вот код, у меня сейчас:

<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]}`}> 

FYI есть огромная библиотека называется 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} />