javascript - Åtkomst till props inuti citattecken i React JSX

I JSX, hur refererar man ett värde från props inifrån ett citerat attributvärde?

Till exempel:

<img className="image" src="images/{this.props.image}" />

Det resulterande HTML-utdata är:

<img class="image" src="images/{this.props.image}">

Svar #1

React (eller JSX) stöder inte variabelinterpolation inuti ett attributvärde, men du kan sätta vilken JS-uttryck som helst inuti klamrar som hela attributvärdet, så här fungerar det:

<img className="image" src={"images/" + this.props.image} />

Svar #2

Om du vill använda ES6-template-literal, behöver du också klamrar runt backtick-tecknen:

<img className="image" src={`images/${this.props.image}`} />

Svar #3

Om du använder JSX med Harmony kan du göra så här:

<img className="image" src={`images/${this.props.image}`} />

Här skriver du värdet av src som ett uttryck.

Svar #4

Istället för att lägga till variabler och strängar kan du använda ES6-mallsträngar! Här är ett exempel:

<img className="image" src={`images/${this.props.image}`} />

När det gäller alla andra JavaScript-komponenter inuti JSX, använd mallsträngar inuti klamrar. För att "injicera" en variabel, använd ett dollartecken följt av klamrar som innehåller den variabel du vill injicera. Till exempel:

{`string ${variable} another string`}

Relaterade artiklar