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