アイデアはできることです:
{this.state.list.map((item, key) => <MyComponent {item, key} />)}
あなたはそれについてどう思いますか?
私はノーと言いたがります。 さまざまな構文を使用することについて多くのことを話しましたが、可能な限り最小限に抑えるようにしています。 {...spread}
を追加することは、すでにかなり大きな問題でした。
cc @sebmarkbage
https://github.com/facebook/jsxで構文の議論を続けようとしています。こうすることで、この構文に貢献する幅広いグループを作成して、言語に余分な重みを与える価値を持たせることができます。
<Foo {item} />
、 <Foo {...item} />
、 <Foo item />
の違いはわかりにくいかもしれません。 最後の2つはすでにサポートされています。
私はあなたの考え方が好きです。 これについて強く感じている場合は、 https://github.com/facebook/jsxで問題を開く必要があります
https://github.com/facebook/jsx/pull/118
^ここで説明するオブジェクト式構文の提案。
の違いは
、 と 混乱しすぎるかもしれません。
混乱は相対的なものかもしれません。 <Foo item />
は、常に{item:true}と評価されるため、あまり役に立ちません。 後から考えると、非常に制限されているように感じますが、html遺伝子からその動作を理解できます。 個人的にはあまり使い道がありません。
{item}
は{item: item}
の省略形です。 {...item}
は、新しいオブジェクトへのフラット化/浅いコピー/拡散の省略形です。
誰かがjsxがh(name: string | Component, props: {[name]: any}, ...children)
にトランスパイルすることを理解したら。 ObjectExpressionは自然に分類されます。
<Foo {x} />
がサポートされていないのに、 <Foo {...x} />
はサポートされているのは紛らわしいです。 回避策は
<Foo {...{x}} />
これはもっと混乱します。