Объединение переменных и строк в React

156

Есть ли способ включить фигурную скобку React и hrefтег? Скажем, у нас есть следующее значение в состоянии:

{this.state.id}

и следующие атрибуты HTML для тега:

href="#demo1"
id="demo1"

Есть ли способ добавить idсостояние в атрибут HTML, чтобы получить что-то вроде этого:

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

Который даст:

#demo1

— lost9123193
источник

322

Вы почти правы, просто неуместно несколько цитат. Заключение в обычные кавычки буквально даст вам строку #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.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());

Я рекомендую второй пример, это быстрее.

— Юнус Э.Р.
источник