Cómo concatenar dos fragmentos JSX o variables o string y componente (en Reactjs)?

Te recomendamos que revises esta solución en un ambiente controlado antes de enviarlo a producción, saludos.

Solución:

Usar matrices:

let lineComponent = ;
if (line.created_at) 
  return [
    
line.created_at
,
    lineComponent,
  ];
 else 
  return chat_line;

O usa fragmentos:

import createFragment from "react-addons-create-fragment";

let lineComponent = ;
if (line.created_at) 
  return createFragment(
    date: 
line.created_at
,
    lineComponent: lineComponent,
  );
 else 
  return chat_line;

En ambos casos hay que proveer keys para reaccionar. En caso de arrayconfigura key directamente sobre el elemento. Con respecto a los fragmentos, usted proporciona key:pares de elementos.

NOTA:
Al regresar de render método, solo puede devolver un solo elemento, o NULL. Los ejemplos proporcionados no son válidos en ese caso.

Para React Native, prefiero esta técnica:

1. pro: en contraste con el array técnica que no tienes que crear artificialmente keys
2. con: requiere la sobrecarga de un elemento contenedor (por ejemplo, Ver, abajo)

jsx = first;
jsx = jsxsecond;

Puedes usar etiquetas vacías, quiero decir, <> y siempre que simplemente no desee más Container-Element (p.ej ), como abajo:

  render() 
    return (
      <>
        First

        Second
      
    );
  

Ejemplo:

import React from 'react'
import  View, Text  from 'react-native'

import Reinput from 'reinput'

export default class ReinputWithHeader extends Reinput 
  constructor(props) 
    super(props);
  
  render() 
    return (
      <>
        
          Blue Header
        

        super.render()
      
    );
  

Nota: lo probé y funciona en react-native también; véase también Fragmentos.

Avance:

Calificaciones y comentarios

Si te ha resultado útil nuestro artículo, agradeceríamos que lo compartas con más desarrolladores así contrubuyes a dar difusión a este contenido.

---

---

Utiliza Nuestro Buscador