Cómo evitar el envoltorio adicional en reaccionar?

6 minutos de lectura

avatar de usuario
Kirill Reznikov

Hoy comencé a aprender ReactJS y después de una hora me enfrenté al problema. Quiero insertar un componente que tiene dos filas dentro de un div en la página. Un ejemplo simplificado de lo que estoy haciendo a continuación.

tengo un html:

<html>
..
  <div id="component-placeholder"></div>
..
</html>

Función de representación como esta:

...
render: function() {

    return(
        <div className="DeadSimpleComponent">
            <div className="DeadSimpleComponent__time">10:23:12</div >
            <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
        </div>
    )
}
....

Y debajo estoy llamando render:

ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder'));

El HTML generado se ve así:

<html>
..
  <div id="component-placeholder">
    <div class="DeadSimpleComponent">
            <div class="DeadSimpleComponent__time">10:23:12</div>
            <div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
    </div>
</div>
..
</html>

El problema es que no estoy muy contento de que React me obligue a envolver todo en un div “DeadSimpleComponent”. ¿Cuál es la solución mejor y más simple para esto, sin manipulaciones DOM explícitas?

ACTUALIZACIÓN 28/7/2017: Los mantenedores de React agregaron esa posibilidad en React 16 Beta 1

Ya que reaccionar 16.2Puedes hacerlo:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

  • Práctica de nombres perfecta 😉

    – Kirill Reznikov

    17/11/2015 a las 20:25

  • ¿Puedo ver su archivo HTML? Leí mal tu pregunta. Sin embargo, puedo tener una solución.

    – Luis93

    17 de noviembre de 2015 a las 20:26

  • Algo como esto: jsfiddle.net/qawumm3v

    – Kirill Reznikov

    17/11/2015 a las 20:50


  • ¿Tiene un problema con un componente que tiene un solo elemento? ¿En serio?

    – Domingo

    17/11/2015 a las 22:45

  • + para <> ... </>

    – Mamrezo

    29 de junio de 2020 a las 19:33

avatar de usuario
Luger

Este requisito se eliminó en la versión de React (16.0)]1por lo que ahora puede evitar ese envoltorio.

Puede usar React.Fragment para representar una lista de elementos sin crear un nodo principal, ejemplo oficial:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Más aquí: Fragmentos

  • Buenas noticias DmitryUlyanets. ¿Hay alguna fecha de lanzamiento prevista?

    – Jonas Carlbaum

    20 de junio de 2017 a las 15:17


  • Está lanzado desde el 26 de septiembre de 2017, ver reactjs.org/blog/2017/09/26/react-v16.0.html

    – Tomás

    8 de noviembre de 2017 a las 7:54


  • También puede usar la abreviatura: > en lugar de

    – JMac

    20 de enero de 2021 a las 10:57

avatar de usuario
Tomás

Actualización 2017-12-05:
reaccionar v16.2.0 ahora es totalmente compatible con la representación de fragmentos con soporte mejorado para devolver múltiples elementos secundarios desde un método de representación de componentes sin especificar claves en los elementos secundarios:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Si está usando una versión de React anterior a v16.2.0, también es posible usar <React.Fragment>...</React.Fragment> en cambio:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Original:

React v16.0 introdujo la devolución de una matriz de elementos en el método de procesamiento sin envolverlo en un div: https://reactjs.org/blog/2017/09/26/react-v16.0.html

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Por el momento, se requiere una clave para cada elemento para evitar la advertencia de clave, pero esto podría cambiarse en versiones futuras:

En el futuro, probablemente agregaremos una sintaxis de fragmento especial a JSX que no requiere claves.

  • La nueva sintaxis abreviada de > es genial. Sin embargo, todavía tengo muchos sentimientos encontrados al respecto.

    – Thulani Chivandikwa

    3 jun 2019 a las 20:45

  • @ThulaniChivandikwa ¿Le importaría expresar sus dudas sobre la sintaxis abreviada?

    – Tomás

    4 de junio de 2019 a las 5:00

  • Creo que se trata más del concepto de que una etiqueta vacía es extraña en el JSX y no muy intuitiva a menos que sepa exactamente lo que hace.

    – Thulani Chivandikwa

    4 de junio de 2019 a las 6:37

  • Estaba un poco confundido por el comentario “agregar una sintaxis de fragmento especial a JSX que no requiere claves”. Querían decir que una vez que introdujeran fragmentos, no necesitaría una clave en cada elemento de la lista como solía hacerlo. Todavía necesitas <Fragment key={foo}> cuando los usa en una lista.

    – Noúmeno

    24 de febrero a las 21:24

avatar de usuario
Rolando Cintrón

Puedes usar:

render(){
    return (
        <React.Fragment>
           <div>Some data</div>
           <div>Som other data</div>
        </React.Fragment>
    )
}

Para más detalles consulte esta documentación.

Usar []en lugar de ()’s para envolver todo el retorno.

render: function() {
  return[
    <div className="DeadSimpleComponent__time">10:23:12</div >
    <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
  ]
}

Creé un componente para envolver componentes secundarios sin un DIV. Se llama envoltorio de sombra: https://www.npmjs.com/package/react-shadow-wrapper

  • Publiqué un problema en su paquete, ¿puede echar un vistazo? Gracias

    – Antoni4

    10 sep 2019 a las 16:24

avatar de usuario
principal

Esto todavía es necesario, PERO Reaccione ahora, asegúrese de crear elementos sin crear un elemento DOM adicional.

El envoltorio adicional necesario (normalmente con un padre div) porque reacciona createElement método requiere un type parámetro que es either a tag name string (such as 'div' or 'span'), a React component type (a class or a function). Pero esto fue antes de que presentaran React. Fragment.

Referirse este NUEVO documento api para createElement

Reaccionar.createElement : crea y devuelve un nuevo elemento React del tipo dado. El argumento de tipo puede ser una cadena de nombre de etiqueta (como ‘div’ o ‘span’), un tipo de componente React (una clase o una función), o un tipo de fragmento React.

aquí está el ejemplo oficial, Consulte Reaccionar.Fragmento.

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

  • Publiqué un problema en su paquete, ¿puede echar un vistazo? Gracias

    – Antoni4

    10 sep 2019 a las 16:24

Sé que esta pregunta ha sido respondida, por supuesto, puede usar React.Fragment que no crea un nodo pero le permite agrupar cosas como un div.

Además, si quiere divertirse, puede implementar (y aprender muchas cosas) un modo React que elimina los div adicionales y para esto realmente quiero compartir un excelente video sobre cómo puede hacerlo en la base del código de reacción.

https://www.youtube.com/watch?v=aS41Y_eyNrU

Por supuesto, esto no es algo que harías en la práctica, pero es una buena oportunidad de aprendizaje.

¿Ha sido útil esta solución?