Concatenación de variables y cadenas en React

156

¿Hay alguna manera de incorporar la notación de llaves y una hrefetiqueta de React ? Digamos que tenemos el siguiente valor en el estado:

{this.state.id}

y los siguientes atributos HTML en una etiqueta:

href="#demo1"
id="demo1"

¿Hay alguna manera de agregar el idestado al atributo HTML para obtener algo como esto:

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

Lo que rendirá:

#demo1

— lost9123193
fuente

322

Estás casi en lo correcto, solo extraviaste algunas citas. Ajustar todo en comillas regulares literalmente le dará la cadena #demo + {this.state.id}: debe indicar cuáles son variables y cuáles son literales de cadena. Como todo lo que hay dentro {}es una expresión JSX en línea , puede hacer lo siguiente:

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

Esto usará el literal de cadena #demoy lo concatenará al valor de this.state.id. Esto se puede aplicar a todas las cadenas. Considera esto:

var text = "world";

Y esto:

{"Hello " + text + " Andrew"}

Esto producirá:

Hello world Andrew

También puede usar literales de plantilla / interpolación de cadenas ES6 con `(backticks) y ${expr}(expresión interpolada), que está más cerca de lo que parece estar intentando hacer:

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

Básicamente, esto sustituirá el valor de this.state.id, concatenando a #demo. Es lo mismo que hacer: "#demo" + this.state.id.

— Andrew Li
fuente

Implementando el primero, eslint sugirió implementar el segundo, usar plantillas literales de cadena. eslint.org/docs/rules/prefer-template

— w00ngy

@ w00ngy Sí, deberías. ES2015 (que introdujo plantillas) recién comenzaba a tener una adopción generalizada. Hoy en día, los literales de plantilla son el ir a.

— Andrew Li

38

La mejor manera de concatenar accesorios / variables:

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

— Kevin Laurente
fuente

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

ejemplo1 =


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

ejemplo2 =

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

Recomiendo el segundo ejemplo, es más rápido.

— Yunus ER
fuente