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 to={`getting-started/${this.props.message}`}>
     <h1>Under {this.props.message}/-</h1>
</Link>

私の知る限り、最初に：

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

2番目：

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

JSXでは、classNameを連結するために、中括弧「{}」の間に文字列と小道具を含める必要があります。中括弧はJSXを示し、JSの観点から内部を評価するためです。だからあなたは試してみるべきです

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