У JSX, як мені встановити className як рядок + {prop}

Я трохи новачок у React і намагаюся встановити className як string + prop. Але я не впевнений, як це зробити і чи це найкраща практика.

Отже, що я намагаюся зробити, і це, очевидно, не працює, це:

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

Як би я писав це?

Ви можете використовувати конкатенацію рядків

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

або скористайтеся Template stringsновою функцією ES2015

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

Ви також можете спробувати:

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

або

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

Якщо ви використовуєте компонент Link, тоді ви можете об'єднати так:

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

Наскільки мені відомо, спочатку:

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

Друге:

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

У JSX для конкатенації className у вас повинні бути рядок та реквізит між фігурними дужками "{}", оскільки фігурні дужки позначають JSX для оцінки будь-чого всередині з точки зору JS. Тож спробуйте

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