W JSX, jak ustawić nazwę klasy jako ciąg znaków + {prop}

Jestem trochę nowy w React i próbuję ustawić className jako string + prop. Ale nie jestem pewien, jak to zrobić i czy jest to najlepsza praktyka.

Więc to, co próbuję zrobić, a to oczywiście nie działa, to:

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

Jak bym to napisał?

Możesz użyć konkatenacji ciągów

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

lub użyj Template stringsnowej funkcji ES2015

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

Możesz też spróbować:

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

lub

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

Jeśli używasz komponentu Link, możesz połączyć w ten sposób:

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

O ile wiem, najpierw:

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

Druga:

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

W JSX, dla konkatenacji className, powinieneś mieć swój ciąg znaków i rekwizyty pomiędzy nawiasami klamrowymi „{}”, ponieważ nawiasy klamrowe oznaczają JSX, aby ocenić cokolwiek wewnątrz z perspektywy JS. Więc powinieneś spróbować

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