Об'єднання змінних і рядків у React

156

Чи є спосіб включити фігурну фігурну фігурну позначку і hrefтег React ? Скажімо, у нас є таке значення в штаті:

{this.state.id}

та такі атрибути HTML у тегу:

href="#demo1"
id="demo1"

Чи є спосіб я додати idстан до атрибуту HTML, щоб отримати щось подібне:

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

Що дасть:

#demo1

— втрачено9123193
джерело

321

Ви майже правильні, просто неправильно поставили кілька цитат. Згортання всієї речі звичайними лапками буквально дасть вам рядок #demo + {this.state.id}- вам потрібно вказати, які є змінні, а які - рядкові літерали. Оскільки все, що {}знаходиться всередині, є вбудованим виразом JSX , ви можете:

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

Це використовуватиме рядковий літерал #demoі з'єднає його зі значенням this.state.id. Потім це можна застосувати до всіх рядків. Врахуйте це:

var text = "world";

І це:

{"Hello " + text + " Andrew"}

Це дасть:

Hello world Andrew

Ви також можете використовувати літеральні рядки інтерполяції / шаблону ES6 з `(зворотними посиланнями) та ${expr}(інтерпольованим виразом), що ближче до того, що ви, схоже, намагаєтеся зробити:

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

Це в основному замінить значення this.state.id, приєднавши його до #demo. Це еквівалентно робити: "#demo" + this.state.id.

— Андрій Лі
джерело

Реалізуючи перший, eslint запропонував реалізувати другий, використовуйте рядкові буквені шаблони. eslint.org/docs/rules/prefer-template

— w00ngy

@ w00ngy Так, слід. ES2015 (який запровадив шаблони) тільки починає набувати широкого поширення. На сьогоднішній день шаблони буквені літерали.

— Ендрю Лі

38

найкращий спосіб скоротити реквізити / змінні:

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

— Кевін Лоренте
джерело

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

Рекомендую другий приклад, це швидше.

— Юнус ЕР
джерело