Concatenando Variáveis e Strings no React

155

Existe uma maneira de incorporar a notação entre chaves do React e uma hreftag? Digamos que tenhamos o seguinte valor no estado:

{this.state.id}

e os seguintes atributos HTML em uma tag:

href="#demo1"
id="demo1"

Existe uma maneira de adicionar o idestado ao atributo HTML para obter algo assim:

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

Qual produzirá:

#demo1

— lost9123193
fonte

320

Você está quase correto, apenas extraviou algumas citações. O agrupamento completo de aspas regulares fornecerá literalmente a string #demo + {this.state.id}- você precisa indicar quais são as variáveis e quais são literais da string. Como qualquer coisa dentro {}é uma expressão JSX embutida , você pode fazer:

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

Isso usará a string literal #demoe concatenará com o valor de this.state.id. Isso pode ser aplicado a todas as strings. Considere isto:

var text = "world";

E isto:

{"Hello " + text + " Andrew"}

Isso produzirá:

Hello world Andrew

Você também pode usar literais de interpolação / modelo de string ES6 com `(backticks) e${expr} (expressão interpolada), o que está mais próximo do que você parece estar tentando fazer:

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

Isso basicamente substituirá o valor de this.state.id, concatenando-o para #demo. É equivalente a fazer: "#demo" + this.state.id.

— Andrew Li
fonte

Implementando o primeiro, o eslint sugeriu implementar o seu segundo, use modelos literais de string. eslint.org/docs/rules/prefer-template

— w00ngy

@ w00ngy Sim, você deveria. O ES2015 (que introduziu modelos) estava apenas começando a obter ampla adoção. Hoje em dia, os literais de modelo são a opção.

— Andrew Li

38

a melhor maneira de conciliar adereços / variáveis:

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

— Kevin Laurente
fonte

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

Eu recomendo o segundo exemplo, é mais rápido.

— Yunus ER
fonte

Concatenando Variáveis ​​e Strings no React

Concatenando Variáveis e Strings no React