Menggabungkan variabel dan string dalam Bereaksi

156

Apakah ada cara untuk menggabungkan notasi keriting tanda dan hreftag React ? Katakanlah kita memiliki nilai berikut di negara bagian:

{this.state.id}

dan atribut HTML berikut pada tag:

href="#demo1"
id="demo1"

Apakah ada cara saya dapat menambahkan idstatus ke atribut HTML untuk mendapatkan sesuatu seperti ini:

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

Yang akan menghasilkan:

#demo1

— hilang9123193
sumber

322

Anda hampir benar, hanya salah menaruh beberapa kutipan. Membungkus semuanya dengan tanda kutip reguler benar-benar akan memberi Anda string #demo + {this.state.id}- Anda perlu menunjukkan variabel mana dan mana yang merupakan string literal. Karena apa pun di dalamnya {}adalah ekspresi JSX sebaris , Anda dapat melakukan:

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

Ini akan menggunakan string literal #demodan menggabungkannya dengan nilai this.state.id. Ini kemudian dapat diterapkan ke semua string. Pertimbangkan ini:

var text = "world";

Dan ini:

{"Hello " + text + " Andrew"}

Ini akan menghasilkan:

Hello world Andrew

Anda juga dapat menggunakan string interpolasi / template string ES6 dengan `(backticks) dan ${expr}(ekspresi interpolasi), yang lebih dekat dengan apa yang Anda coba lakukan:

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

Ini pada dasarnya akan menggantikan nilai this.state.id, menggabungkannya dengan #demo. Hal ini setara dengan melakukan: "#demo" + this.state.id.

— Andrew Li
sumber

Menerapkan yang pertama, eslint menyarankan menerapkan yang kedua, gunakan templat literal string. eslint.org/docs/rules/prefer-template

— w00ngy

@ w00ngy Ya, Anda harus. ES2015 (yang memperkenalkan template) baru mulai mendapatkan adopsi luas. Saat ini, literal templat adalah tujuan.

— Andrew Li

38

cara terbaik untuk menyatukan alat peraga / variabel:

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

— Kevin Laurente
sumber

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

Saya merekomendasikan contoh kedua, lebih cepat.

— Yunus ER
sumber