reactjs - siglas - ¿Cómo devolver varias líneas JSX en otra declaración de devolución en React?

react project with jsx

Question

Una sola línea funciona bien

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return <p>{n}</p>
    }}
  );
}

no para líneas múltiples

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return (
        <h3>Item {n}</h3>
        <p>Description {n}</p>
      )
    }}
  );
}

Gracias.

Answer 1

Además, es posible que desee devolver varios elementos de la lista en alguna función auxiliar dentro de un componente Reaccionar. Simplemente devuelva una matriz de nodos html con el atributo key :

import React, { Component } from ''react''

class YourComponent extends Component {
  // ...

  render() {
    return (
      <ul>
        {this.renderListItems()}
      </ul>
    )
  }      

  renderListItems() {
    return [
      <li key={1}><a href="#">Link1</a></li>,
      <li key={2}><a href="#">Link2</a></li>,
      <li key={3} className="active">Active item</li>,
    ]
  }
}

Answer 2

Con React> 16 puedes usar react-composite .

import { Composite } from ''react-composite'';

// ...

{[1,2,3].map((n) => (
  <Composite>
    <h2>Title {n}</h2>
    <p>Description {n}</p>
  </Composite>
))};

Por supuesto, react-composite tiene que ser instalado.

npm install react-composite --save

Answer 3

Desde React v16.0.0 en adelante, es posible devolver varios elementos envolviéndolos dentro de una Array

render() {
  return (
    {[1,2,3].map(function (n) {
      return [
        <h3>Item {n}</h3>.
        <p>Description {n}</p>
      ]
    }}
  );
}

También de React v16.2.0 , se introdujo una nueva característica llamada React Fragments que puede usar para ajustar varios elementos

render() {
  return (
    {[1,2,3].map(function (n, index) {
      return (
        <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
        </React.Fragment>
      )
    }}
  );
}

Según la documentación:

Un patrón común en React es que un componente devuelva múltiples elementos. Los fragmentos le permiten agrupar una lista de niños sin agregar nodos adicionales al DOM.

Los fragmentos declarados con la sintaxis explícita pueden tener claves. Un caso de uso para esto es asignar una colección a una matriz de fragmentos; por ejemplo, para crear una lista de descripción:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

la clave es el único atributo que se puede pasar a Fragment. En el futuro, podemos agregar soporte para atributos adicionales, como controladores de eventos.

Answer 4

Intenta pensar en las etiquetas como llamadas a funciones (ver docs ). Entonces el primero se convierte en:

{[1,2,3].map(function (n) {
  return React.DOM.p(...);
})}

Y el segundo:

{[1,2,3].map(function (n) {
  return (
    React.DOM.h3(...)
    React.DOM.p(...)
  )
})}

Ahora debería estar claro que el segundo fragmento realmente no tiene sentido (no puede devolver más de un valor en JS). Tienes que envolverlo en otro elemento (lo más probable es que lo desees, de esa manera también puedes proporcionar una propiedad de key válida), o puedes usar algo como esto:

{[1,2,3].map(function (n) {
  return ([
    React.DOM.h3(...),
    React.DOM.p(...)
  ]);
})}

Con azúcar JSX:

{[1,2,3].map(function (n) {
  return ([
    <h3></h3>, // note the comma
    <p></p>
  ]);
})}

No necesita aplanar la matriz resultante, React lo hará por usted. Vea el siguiente violín http://jsfiddle.net/mEB2V/1/ . Nuevamente: Envolver los dos elementos en una sección div / será mejor a largo plazo.

Answer 5

Parece que la antigua respuesta sobre devolver una matriz ya no se aplica (tal vez desde React ~ 0.9, como escribió @ dogmatic69 en un comentario ).

docs dicen que necesitas devolver un solo nodo:

Número máximo de nodos de raíz JSX

Actualmente, en el procesamiento de un componente, solo puede devolver un nodo; si tiene, por ejemplo, una lista de divs para devolver, debe envolver sus componentes dentro de un div, span o cualquier otro componente.

No olvide que JSX compila en JS regular; devolver dos funciones realmente no tiene sentido sintáctico. Del mismo modo, no pongas más de un niño en un ternario.

En muchos casos, simplemente puede ajustar las cosas en un <div> o un <span> .

En mi caso, quería devolver múltiples <tr> s. Los envolví en <tbody> - se permite que una mesa tenga múltiples cuerpos.

EDITAR: A partir de la Reacción 16.0, aparentemente se permite regresar una matriz, siempre que cada elemento tenga una key : https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings

EDIT: React 16.2 le permite rodear una lista de elementos con <Fragment>…</Fragment> o incluso <>…</> , si lo prefiere a una matriz: https://blog.jmes.tech/react-fragment-and-semantic-html/

Answer 6

Puede usar createFragment aquí.

https://facebook.github.io/react/docs/create-fragment.html

import createFragment from ''react-addons-create-fragment'';
...
{[1,2,3].map((n) => createFragment({
    h: <h3>...</h3>,
    p: <p>...</p>
  })
)}

(usando la sintaxis ES6 y JSX aquí)

primero debe agregar el paquete react-addons-create-fragment :

npm install --save react-addons-create-fragment

Ventaja sobre la solución de Jan Olaf Krems: reaccionar no se queja de la key falta