¿Cómo concatenar dos fragmentos JSX o variables o cadenas y componentes (en Reactjs)?

Solución:

Utilice matrices:

let lineComponent = <Line key={line.client_id} line={line}/>;
if (line.created_at) {
  return [
    <div key="date" className="date-line"><strong>{line.created_at}</strong></div>,
    lineComponent,
  ];
} else {
  return chat_line;
}

O use fragmentos:

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

let lineComponent = <Line key={line.client_id} line={line}/>;
if (line.created_at) {
  return createFragment({
    date: <div className="date-line"><strong>{line.created_at}</strong></div>,
    lineComponent: lineComponent,
  });
} else {
  return chat_line;
}

En ambos casos, debe proporcionar claves para React. En el caso de una matriz, establece la clave directamente en el elemento. Con respecto a los fragmentos, proporciona pares clave: elemento.

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: a diferencia de la técnica de matriz, no tiene que crear claves artificialmente
2. con: requiere la sobrecarga de un elemento contenedor (por ejemplo, Ver, debajo)

jsx = <Text>first</Text>;
jsx = <View>{jsx}<Text>second</Text></View>;

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

  render() {
    return (
      <>
        <Text>First</Text>

        <Text>Second</Text>
      </>
    );
  }

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 (
      <>
        <View style={{backgroundColor: 'blue', flexDirection: 'row', alignSelf: 'stretch', height: 20}}>
          <Text>Blue Header</Text>
        </View>

        {super.render()}
      </>
    );
  }
}

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

Avance:

---

---

Utiliza Nuestro Buscador