En JSX, ¿cómo configuro un className como cadena + {prop}

Soy un poco nuevo en React e intento establecer un className como string + prop. Pero no estoy seguro de cómo hacerlo y si esa es la mejor práctica.

Entonces, lo que estoy tratando de hacer, y obviamente no está funcionando, es esto:

<a data-featherlight='string' + {this.props.data.imageUrl}>

¿Cómo haría para escribir esto?

Puedes usar la concatenación de cadenas

<a data-featherlight={'string' + this.props.data.imageUrl}>

o use la Template stringsnueva función ES2015

<a data-featherlight={ `string${this.props.data.imageUrl}` }>

También puedes probarlo:

<a data-featherlight={'string1' + this.props.data.imageUrl + 'string2'}>

o

<a data-featherlight={ `string1 ${this.props.data.imageUrl} string2` }>

Si está utilizando el componente Link, puede realizar una concatenación como esta:

<Link to={`getting-started/${this.props.message}`}>
     <h1>Under {this.props.message}/-</h1>
</Link>

Hasta donde yo sé, primero:

<a data-featherlight={'your string' + this.props.data.imageUrl}>

Segundo:

<a data-featherlight={`your string ${this.props.data.imageUrl}`}>

En JSX, para la concatenación de className, debe tener su cadena y accesorios entre llaves "{}", porque las llaves denotan JSX para evaluar lo que sea dentro desde la perspectiva de JS. Entonces deberías intentar

<a data-featherlight={'string' + this.props.data.imageUrl}>