React: idea: admite la taquigrafía del valor de la propiedad literal del objeto en la sintaxis jsx

Creado en 16 nov. 2014  ·  3Comentarios  ·  Fuente: facebook/react

la idea seria poder hacer:

{this.state.list.map((item, key) => <MyComponent {item, key} />)}

¿Qué pensarías de eso?

Todos 3 comentarios

Me inclino a decir que no. Hemos hablado mucho sobre el uso de diferentes sintaxis y estamos tratando de mantenerlo lo más mínimo posible. Agregar {...spread} ya era un gran problema.

cc @sebmarkbage

Tratamos de mantener las discusiones sobre sintaxis en: https://github.com/facebook/jsx De esa manera, podemos tener un grupo más amplio que contribuya a esta sintaxis para que valga la pena el peso extra para el idioma.

Creo que la diferencia entre <Foo {item} /> , <Foo {...item} /> y <Foo item /> puede ser demasiado confusa. Los dos últimos ya son compatibles.

Aunque me gusta tu forma de pensar. Si está convencido de esto, debe abrir un problema en https://github.com/facebook/jsx

https://github.com/facebook/jsx/pull/118

^ Una propuesta para la sintaxis de expresión de objeto como se analiza aquí.

Creo que la diferencia entre , y podría ser demasiado confuso.

La confusión puede ser relativa. <Foo item /> no es muy útil ya que siempre se evalúa como {item: true}. En retrospectiva, se siente muy limitado, pero puedo entender su comportamiento a partir de sus genes html. Personalmente no le he encontrado mucho uso.

y no son confusos si lo mira desde la perspectiva de la notación de objetos ES8. {item} es la abreviatura de {item: item} . {...item} es la abreviatura de aplanar/copia superficial/difundir en un objeto nuevo.

una vez que alguien entiende que jsx transpila a h(name: string | Component, props: {[name]: any}, ...children) . ObjectExpression cae naturalmente.

Es confuso que <Foo {x} /> no sea compatible pero <Foo {...x} /> sí lo sea. La solución es
<Foo {...{x}} /> que es mucho más confuso.

¿Fue útil esta página
0 / 5 - 0 calificaciones