@composi/core:

Fragmento

Cómo Usar Fragmentos en los Componentes

Para poder usar los fragmentos, primero tenemos que importar la función Fragment en el proyecto desde @composi/core:

import { h, render, Fragment } from '@composi/core'

Después de importarlo, podemos ya usarlo.

Uso

Cómo Usar los Fragmentos

@composi/fragment es una función espeical para JSX. Hace una cosa, devuelve sus hijos envuletos en una matriz. Esto habilita agrupar una serie de elementos hermanos para que otro elemento los envuelva. Harías esto típicamente para las listas o celdas de tablas. Pero puedes usarlo para cualquier situación en que quieres agrupar varios elementos juntos.

Para usar Fragment, tan solo pon los hermanos dento de él y devuélvelo:

See the Pen @composi/core - Fragment by Robert Biggs (@rbiggs) on CodePen.

Y aquí hay otro ejemplo de Fragment:

See the Pen @composi/core - Fragment-2 by Robert Biggs (@rbiggs) on CodePen.

Forma Abreviada: <></>

Puesto que create-composi-app hace proyectos que usan Babel 7, puedes tomar ventaja de la forma abreviada de Fragment: <></>

import { h, render } from '@composi/core'
        import { Fragment } from '@composi/fragment'

        function ÍtemesDeLista() {
          // Devolver el fragmento:
          return (
            <>
              <li>Uno</li>
              <li>Dos</li>
              <li>Tres</li>
            </>
          )
        }

Para poder usar esta abreviatura con Babel, tienes que informle a Babel que use el fragmento de Coposi en el archivo .babelrc con un valor para pragmaFrag:

"plugins": [
          [
            "@babel/plugin-transform-react-jsx",
            {
              "pragma": "h",
              "pragmaFrag": "Fragment"
            }
          ]
        ]

Los Fragmentos no Tienen Atributos

Dado que los fragmentos no son elementos reales, no puedes darles ningún atributo. Cuando el JSX se compila en un nodo virtual, los fragmentos se descartan y solo se devuelven sus hijos. Los hijos de Fragment se convierten en hijos del nodo padre del Fragment. Esto significa que no puedes asignar un id, class o key a un Fragmento. Usted puede, sin embargo, pasar las props. Fíjate cómo pasamos los datos a la etiqueta ÍtemesDeLista:

import { h, render } from '@composi/core'
        import { Fragment } from '@composi/fragment'

        function ÍtemesDeLista({datos}) {
          return (
            <>
              {
                datos.map(ítem => <li>{ítem}</li>)
              }
            </>
          )
        }

        function Lista({datos}) {
          return (
            <ul>
              <ÍtemesDeLista {...{datos}} />
            </ul>
          )
        }

        render(<Lista datos={[1,2,3]} />, 'section')