React: ideia: suporte abreviação do valor da propriedade literal do objeto na sintaxe jsx

Criado em 16 nov. 2014  ·  3Comentários  ·  Fonte: facebook/react

a ideia seria poder fazer:

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

o que você acharia disso?

Todos 3 comentários

Estou inclinado a dizer não. Falamos muito sobre o uso de sintaxes diferentes e estamos tentando mantê-lo o mínimo possível. Adicionar o {...spread} já era um grande negócio.

cc @sebmarkbage

Tentamos manter as discussões sobre sintaxe em: https://github.com/facebook/jsx Dessa forma, podemos ter um grupo mais amplo contribuindo com essa sintaxe para fazer valer a pena o peso extra da linguagem.

Acho que a diferença entre <Foo {item} /> , <Foo {...item} /> e <Foo item /> pode ser muito confusa. Os dois últimos já são suportados.

Eu gosto da maneira como você pensa embora. Se você se sente fortemente sobre isso, você deve abrir um problema em https://github.com/facebook/jsx

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

^ Uma proposta para a sintaxe de expressão de objeto conforme discutido aqui.

Acho que a diferença entre , e pode ser muito confuso.

A confusão pode ser relativa. <Foo item /> não é muito útil, pois sempre avalia {item: true}. Em retrospectiva, parece muito limitado, mas posso entender seu comportamento a partir de seus genes html. Eu pessoalmente não encontrei muito uso para isso.

e não são confusos se você olhar para ele da perspectiva da notação de objeto ES8. {item} é uma abreviação de {item: item} . {...item} é uma abreviação para achatar/copiar/espalhar em um novo objeto.

uma vez que alguém entende que o jsx é transpilado para h(name: string | Component, props: {[name]: any}, ...children) . ObjectExpression cai naturalmente.

É confuso que <Foo {x} /> não seja suportado, mas <Foo {...x} /> seja suportado. A solução alternativa é
<Foo {...{x}} /> que é muito mais confuso.

Esta página foi útil?
0 / 5 - 0 avaliações