Concaténation de variables et de chaînes de caractères dans React

Question

Existe-t-il un moyen d'intégrer la notation d'accolade de React et une méthode d'évaluation de la qualité de l'eau ? href étiquette ? Disons que nous avons la valeur suivante dans l'état :

{this.state.id}

et les attributs HTML suivants sur une balise :

href="#demo1"
id="demo1"

Y a-t-il un moyen d'ajouter le id à l'attribut HTML pour obtenir quelque chose comme ceci :

href={"#demo + {this.state.id}"}

Ce qui donnera :

#demo1

Answer 1

Vous avez presque raison, j'ai juste mal placé quelques citations. En mettant le tout entre des guillemets normaux, vous obtiendrez littéralement la chaîne de caractères suivante #demo + {this.state.id} - vous devez indiquer quelles sont les variables et quelles sont les chaînes de caractères. Puisque tout ce qui se trouve à l'intérieur de {} est un JSX en ligne expression que vous pouvez faire :

href={"#demo" + this.state.id}

Ceci utilisera la chaîne littérale #demo et le concaténer à la valeur de this.state.id . Ceci peut ensuite être appliqué à toutes les chaînes de caractères. Considérez ceci :

var text = "world";

Et ceci :

{"Hello " + text + " Andrew"}

Cela donnera :

Hello world Andrew 

Vous pouvez également utiliser l'interpolation de chaînes ES6/ littéraux de modèle avec ` (backticks) et ${expr} (expression interpolée), qui est plus proche de ce que vous semblez essayer de faire :

href={`#demo${this.state.id}`}

Cela substituera essentiellement la valeur de this.state.id en le concaténant à #demo . C'est équivalent à faire : "#demo" + this.state.id .

Answer 2

la meilleure façon de concaténer des props/variables :

var sample = "test";    
var result = `this is just a ${sample}`;    
//this is just a test

Answer 3

Si tu veux le faire en JSX

<button className={`tab__btn first ${props.state}`} >
    {props.text}
</button>

Answer 4

vous pouvez simplement faire ceci..

 <img src={"http://img.example.com/test/" + this.props.url +"/1.jpg"}/>

Answer 5

pour Concaténation de variables et de chaînes de caractères dans React avec map , par exemple :

{listOfCategories.map((Categories, key) => { return ( <a href={`#${Categories.designation}`} className="cat-link" key={key}> </div> </a> ); })}