Как в JSX установить className как строку + {prop}

Question 1

Я немного новичок в React и пытаюсь установить className как string + prop. Но я не уверен, как это сделать и насколько это лучше.

Итак, что я пытаюсь сделать, и это, очевидно, не работает, это следующее:

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

Как бы мне это написать?

Question 2

Вы можете использовать конкатенацию строк

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

или используйте Template stringsновую функцию ES2015

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

Question 3

Вы также можете попробовать:

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

Question 4

Насколько мне известно, сначала:

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

Второй:

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

Question 5

В JSX для конкатенации className ваша строка и реквизиты должны быть между фигурными скобками «{}», потому что фигурные скобки обозначают JSX для оценки всего, что находится внутри, с точки зрения JS. Так что тебе стоит попробовать

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