Я немного новичок в 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}>источник