Concaténation de variables et de chaînes dans React

156

Existe-t-il un moyen d'incorporer la notation entre accolades de React et une hrefbalise? 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 l' idétat à l'attribut HTML pour obtenir quelque chose comme ceci:

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

Ce qui donnera:

#demo1

— perdu9123193
source

322

Vous avez presque raison, juste égaré quelques citations. Mettre le tout entre guillemets réguliers vous donnera littéralement la chaîne #demo + {this.state.id}- vous devez indiquer quelles sont des variables et lesquelles sont des chaînes littérales. Puisque tout ce qui se trouve à l'intérieur {}est une expression JSX en ligne , vous pouvez faire:

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

Cela utilisera la chaîne littérale #demoet la concaténera à la valeur de this.state.id. Cela peut ensuite être appliqué à toutes les chaînes. Considère ceci:

var text = "world";

Et ça:

{"Hello " + text + " Andrew"}

Cela donnera:

Hello world Andrew

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

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

Cela remplacera essentiellement la valeur de this.state.id, en la concaténant à #demo. Il est équivalent à faire: "#demo" + this.state.id.

— Andrew Li
source

Implémenter le premier, eslint a suggéré d'implémenter votre deuxième, utilisez des modèles de littéraux de chaîne. eslint.org/docs/rules/prefer-template

— w00ngy

@ w00ngy Oui, vous devriez. ES2015 (qui a introduit les modèles) commençait tout juste à être largement adopté. De nos jours, les littéraux de modèle sont la solution.

— Andrew Li

38

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

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

— Kevin Laurente
source

0

exampleData =

        const json1 = [
            {id: 1, test: 1},
            {id: 2, test: 2},
            {id: 3, test: 3},
            {id: 4, test: 4},
            {id: 5, test: 5}
        ];

        const json2 = [
            {id: 3, test: 6},
            {id: 4, test: 7},
            {id: 5, test: 8},
            {id: 6, test: 9},
            {id: 7, test: 10}
        ];

exemple1 =


        const finalData1 = json1.concat(json2).reduce(function (index, obj) {
            index[obj.id] = Object.assign({}, obj, index[obj.id]);
            return index;
        }, []).filter(function (res, obj) {
            return obj;
        });

example2 =

        let hashData = new Map();

        json1.concat(json2).forEach(function (obj) {
            hashData.set(obj.id, Object.assign(hashData.get(obj.id) || {}, obj))
        });

        const finalData2 = Array.from(hashData.values());

Je recommande le deuxième exemple, c'est plus rapide.

— Yunus ER
source