向JSX添加没有值的自定义HTML属性

Question

我有一些需要自定义属性的HTML，这些自定义属性没有取决于情况的值。例如，这些都是有效的：

<div className="playlist-row" selected>
<div className="playlist-row" active>   
<div className="playlist-row">

我尝试做类似的事情

let customAttr = {'active'};  // incorrect syntax
let customAttr = {'active': true};  //doesn't work
let customAttr = {'active': ''};  //doesn't work

<div className="playlist-row" {...customAttr}>

关于如何使它起作用的任何想法？

Answer 1

我相信应该这样做-在您的render()函数中：

render() {
    let customAttr = "active"

    return (
        <div className={"playlist-row " + customAttr}>
    )
}

或者，您可以避免字符串串联...

<div className={`playlist-row ${customAttr}`}>