模板字符串字面值在另一個模板字符串字面內

所以我目前的代碼工作，但我收到了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}`]}`}>

超級難看，不工作，會愛一個更優雅的解決方案。

來源

2016-05-11 Steven Bennett

我不知道這是如何表現的JSX，但在一般來說，雖然不漂亮，但嵌套模板字符串應該可以工作。 – nils

也許這對於JSX是特別的，但似乎沒有使用額外的變量，表達式中的後退單元會相互終止？ –

你能詳細說明「它不工作」嗎？什麼不工作？你有錯誤嗎？ [它在Babel REPL中工作得很好]（https://babeljs.io/repl/#?evaluate=false&lineWrap=false&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=%3Cdiv%20className%3D%7B%60% 24％7Bstyles.dataGridHeader％7D％20％24％7Bstyles％5B％60columns％24％7Bthis.props.data.headers.length％7D％60％5D％7D％60％7D％20％2F％3E＆操場=真）。 –

這個怎麼樣

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

來源

2016-05-11 07:49:52

我會看看classnames，但是答案是正確的，顯然'$ {}'在花括號內綁定了任意數量的可用變量，希望有一種優化的方式可以在沒有使用額外變量的情況下進行內聯操作。 –

@StevenBennett：你看起來不錯的代碼。請詳細說明「這行不通」。 –

模板字符串字面值在另一個模板字符串字面內

回答

相關問題