J'essaie d'accéder à une URL basée sur des données variables.
{
this.state.countries.map((country, key) => {
return <a key={country.iso2}>
<img src="https://www.countryflags.io/{country.iso2}/shiny/24.png" />
</a>;
});
}
La valeur {country.iso2} dans l'URL ci-dessus est dynamique. Veuillez m'aider à mettre en forme l'URL correctement.
5 Réponses :
Essayez Littéraux de modèle . Notez l'utilisation de back tick et $
<img src=`https://www.countryflags.io/${country.iso2}/shiny/24.png`/>
vous pouvez le faire comme
{this.state.countries.map((country, key) => {
return
<a key={country.iso2}>
<img src=`https://www.countryflags.io/${country.iso2}/shiny/24.png`/>
</a>
})}
Utilisez le backtick et le signe dollar
{this.state.countries.map((country, key) => {
return
<a key={country.iso2}>
<img src=`https://www.countryflags.io/${country.iso2}/shiny/24.png`/>
</a>
})}
La bonne façon de faire est d'utiliser Littéraux de modèle
Si votre valeur est dynamique, utilisez back tick et $
Pendant que vous travaillez avec jsx, vous devrez ajouter les accolades, puis les littéraux de modèle, puis la variable entourée de $ {} , comme ceci:
p >
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
let country = { iso2: "au" };
ReactDOM.render(
<img src={`https://www.countryflags.io/${country.iso2}/shiny/24.png`} />,
root
);