En React, ¿por qué no puedes agregar una clave a un fragmento vacío (sintaxis corta)?

1 minuto de lectura

Sé que, en React, no puedes agregar una clave a un fragmento vacío:

// will result in an error
< key={'foo'} > 
 {...}
</>

En su lugar, necesita usar React.Fragment:

// works fine
<React.Fragment key="foo">
   {...}
</React.Fragment>

los Reaccionar documentación nota esto, pero no explica por qué, y tengo curiosidad. ¿Es una limitación en JSX? ¿O es una decisión de diseño que tomó React por alguna razón?

Edito: encontré esta publicación. Suena como Fragment vino primero, luego <> seguido (y fue subido a JSX). Pero, ¿por qué no lo hicieron para que pudiera parametrizarse? Solo tengo curiosidad sobre el contexto de la decisión y si hay una razón subyacente, ya que no entiendo muy bien JSX.

  • Supongo que es una limitación de sintaxis de jsx

    – Konrad Linkowski

    Hace 6 horas

Esta era en realidad una pregunta que también tenía en mente. Después de preguntar a las personas que hicieron las solicitudes de extracción de fragmentos clave y husmear en el código fuente, creo que tengo la respuesta.

Creo que también sería fácil agregar una clave a la sintaxis abreviada, ya que se reconcilian de la misma manera. Sin embargo, si tuviéramos que agregar una clave en la sintaxis abreviada, sería así:

<key="1">foo</>

Ahora bien, esto genera mucha confusión, ¿la clave es otra etiqueta? si no, ¿qué pasa si JSX agrega otro <key></key> etiqueta. Eso generará aún más confusión. Es por eso que toda la sintaxis abreviada no admite atributos.

La compensación por agregar un atributo clave es simplemente demasiado alta

¿Ha sido útil esta solución?