Concatenare variabili e stringhe in React

156

C'è un modo per incorporare la notazione di parentesi graffe di React e un hreftag? Supponiamo di avere il seguente valore nello stato:

{this.state.id}

e i seguenti attributi HTML su un tag:

href="#demo1"
id="demo1"

C'è un modo in cui posso aggiungere lo idstato all'attributo HTML per ottenere qualcosa del genere:

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

Che produrrà:

#demo1

— lost9123193
fonte

322

Hai quasi ragione, hai inserito male alcune citazioni. Avvolgere il tutto tra virgolette regolari ti darà letteralmente la stringa #demo + {this.state.id}- devi indicare quali sono variabili e quali sono letterali stringa. Poiché qualsiasi cosa all'interno {}è un'espressione JSX incorporata , puoi fare:

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

Questo userà la stringa letterale #demoe la concatenerà al valore di this.state.id. Questo può quindi essere applicato a tutte le stringhe. Considera questo:

var text = "world";

E questo:

{"Hello " + text + " Andrew"}

Ciò produrrà:

Hello world Andrew

Puoi anche usare i valori letterali di interpolazione / modello di stringa ES6 con `(backtick) e ${expr}(espressione interpolata), che è più vicino a ciò che sembra stia provando a fare:

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

Questo sostanzialmente sostituirà il valore di this.state.id, concatenandolo #demo. E 'equivalente a fare: "#demo" + this.state.id.

— Andrew Li
fonte

Implementando il primo, eslint ha suggerito di implementare il secondo, usa template letterali di stringa. eslint.org/docs/rules/prefer-template

— w00ngy

@ w00ngy Sì, dovresti. ES2015 (che ha introdotto i modelli) stava appena iniziando ad ottenere un'adozione diffusa. Al giorno d'oggi, i letterali modello sono il punto di partenza.

— Andrew Li,

38

il modo migliore per concaticare oggetti di scena / variabili:

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

— Kevin Laurente
fonte

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}
        ];

example1 =


        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());

Raccomando il secondo esempio, è più veloce.

— Yunus ER
fonte