a ideia seria poder fazer:
{this.state.list.map((item, key) => <MyComponent {item, key} />)}
o que você acharia disso?
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.
{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.