Wie setze ich in JSX einen Klassennamen als Zeichenfolge + {prop}?

80

Ich bin ein bisschen neu in React und versuche, einen Klassennamen als String + Prop festzulegen. Aber ich bin mir nicht sicher, wie ich es machen soll und ob das die beste Vorgehensweise ist.

Ich versuche also Folgendes zu tun, und es funktioniert offensichtlich nicht:

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

Wie würde ich das schreiben?

reactjs

— andromedainiative
quelle

189

Sie können die Verkettung von Zeichenfolgen verwenden

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

oder verwenden Sie die Template stringsneue ES2015-Funktion

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

— Oleksandr T.
quelle

4

Sie können es auch versuchen:

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

oder

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

Wenn Sie die Link-Komponente verwenden, können Sie die Verkettung folgendermaßen durchführen:

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

— Shubham Verma
quelle

1

Soweit ich weiß, zuerst:

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

Zweite:

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

— irsalsss
quelle

2

Wie unterscheidet sich das von der akzeptierten Antwort von 2016?

— Arjan

0

In JSX sollten Sie für die Verkettung von className Ihre Zeichenfolge und Requisiten zwischen geschweiften Klammern "{}" haben, da geschweifte Klammern JSX bezeichnen, um alles aus JS-Sicht zu bewerten. Also solltest du es versuchen

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

— Mokesh S.
quelle

2

Wie unterscheidet sich das von der akzeptierten Antwort von 2016?

— Arjan