Łączenie zmiennych i łańcuchów w Reakcie

156

Czy istnieje sposób na włączenie notacji nawiasów klamrowych Reacta i hreftagu? Powiedzmy, że w stanie mamy następującą wartość:

{this.state.id}

oraz następujące atrybuty HTML w tagu:

href="#demo1"
id="demo1"

Czy istnieje sposób, w jaki mogę dodać idstan do atrybutu HTML, aby uzyskać coś takiego:

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

Który przyniesie:

#demo1

— lost9123193
źródło

321

Masz prawie rację, po prostu zgubiłeś kilka cytatów. Zawinięcie całości w zwykłe cudzysłowy dosłownie da ci ciąg #demo + {this.state.id}- musisz wskazać, które są zmiennymi, a które są literałami łańcuchowymi. Ponieważ wszystko w środku {}jest wbudowanym wyrażeniem JSX , możesz:

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

Spowoduje to użycie literału ciągu #demoi połączy go z wartością this.state.id. Można to następnie zastosować do wszystkich ciągów. Rozważ to:

var text = "world";

I to:

{"Hello " + text + " Andrew"}

To da:

Hello world Andrew

Możesz także użyć interpolacji ciągów / literałów szablonu ES6 z `(lewy apostrof) i ${expr}(wyrażenie interpolowane), co jest bliższe temu, co wydaje się próbować zrobić:

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

Zasadniczo zastąpi to wartość this.state.id, konkatenując ją z #demo. Jest to odpowiednik robi: "#demo" + this.state.id.

— Andrew Li
źródło

Implementując pierwszą, eslint zasugerował zaimplementowanie drugiej, używając szablonów literałów łańcuchowych. eslint.org/docs/rules/prefer-template

— w00ngy

@ w00ngy Tak, powinieneś. ES2015 (który wprowadził szablony) dopiero zaczynał być szeroko stosowany. W dzisiejszych czasach literały szablonów są dostępne.

— Andrew Li,

38

najlepszy sposób na konkatowanie właściwości / zmiennych:

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

— Kevin Laurente
źródło

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

przykład1 =


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

przykład2 =

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

Polecam drugi przykład, jest szybszy.

— Yunus ER
źródło