Verketten von Variablen und Zeichenfolgen in React

155

Gibt es eine Möglichkeit, die geschweifte Klammernotation von React und ein hrefTag zu integrieren? Angenommen, wir haben den folgenden Wert im Status:

{this.state.id}

und die folgenden HTML-Attribute für ein Tag:

href="#demo1"
id="demo1"

Gibt es eine Möglichkeit, den idStatus zum HTML-Attribut hinzuzufügen , um Folgendes zu erhalten:

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

Welches ergibt:

#demo1

— lost9123193
quelle

320

Sie haben fast Recht, nur ein paar Zitate falsch platziert. Wenn Sie das Ganze in reguläre Anführungszeichen setzen, erhalten Sie buchstäblich die Zeichenfolge. #demo + {this.state.id}Sie müssen angeben, welche Variablen und welche Zeichenfolgenliterale sind. Da alles darin {}ein Inline-JSX- Ausdruck ist , können Sie Folgendes tun:

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

Dadurch wird das Zeichenfolgenliteral verwendet #demound mit dem Wert von verkettet this.state.id. Dies kann dann auf alle Zeichenfolgen angewendet werden. Bedenken Sie:

var text = "world";

Und das:

{"Hello " + text + " Andrew"}

Dies ergibt:

Hello world Andrew

Sie können auch ES6-Zeichenfolgeninterpolations- / Vorlagenliterale mit `(Backticks) und ${expr}(interpolierter Ausdruck) verwenden, was näher an dem liegt, was Sie anscheinend zu tun versuchen:

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

Dies ersetzt im Grunde den Wert von this.state.idund verkettet ihn mit #demo. Es ist gleichbedeutend mit : "#demo" + this.state.id.

— Andrew Li
quelle

Bei der Implementierung der ersten, von eslint vorgeschlagenen Implementierung Ihrer zweiten, verwenden Sie String-Literal-Vorlagen. eslint.org/docs/rules/prefer-template

— w00ngy

@ w00ngy Ja, das solltest du. ES2015 (das Vorlagen einführte) fand gerade erst breite Akzeptanz. Heutzutage sind Vorlagenliterale die erste Wahl.

— Andrew Li

38

der beste Weg, um Requisiten / Variablen zu konzentrieren:

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

— Kevin Laurente
quelle

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

Beispiel1 =


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

Beispiel2 =

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

Ich empfehle das zweite Beispiel, es ist schneller.

— Yunus ER
quelle