React: Idee: Unterstützung von Objektliteral-Eigenschaftswert-Kurzschreibweise in jsx-Syntax

Erstellt am 16. Nov. 2014  ·  3Kommentare  ·  Quelle: facebook/react

die idee wäre folgendes zu können:

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

was würdest du davon halten?

Alle 3 Kommentare

Ich bin geneigt, nein zu sagen. Wir haben viel darüber gesprochen, verschiedene Syntaxen zu verwenden, und wir versuchen, sie so gering wie möglich zu halten. Das Hinzufügen der {...spread} war schon eine ziemlich große Sache.

cc @sebmarkbage

Wir versuchen, Syntaxdiskussionen unter https://github.com/facebook/jsx aufrechtzuerhalten. Auf diese Weise können wir eine breitere Gruppe haben, die zu dieser Syntax beiträgt, damit sich das zusätzliche Gewicht der Sprache lohnt.

Ich denke, dass der Unterschied zwischen <Foo {item} /> , <Foo {...item} /> und <Foo item /> zu verwirrend sein könnte. Die letzten beiden werden bereits unterstützt.

Ich mag aber deine Denkweise. Wenn Sie davon überzeugt sind, sollten Sie ein Problem unter https://github.com/facebook/jsx eröffnen

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

^ Ein Vorschlag für die hier besprochene Objektausdruckssyntax.

Ich denke, dass der Unterschied zw , und könnte zu verwirrend sein.

Verwirrung mag relativ sein. <Foo item /> ist nicht sehr nützlich, da es immer zu {item: true} ausgewertet wird. Im Nachhinein fühlt es sich sehr begrenzt an, aber ich kann sein Verhalten anhand seiner HTML-Gene verstehen. Ich persönlich habe nicht viel Verwendung dafür gefunden.

und sind nicht verwirrend, wenn Sie es aus der Perspektive der ES8-Objektnotation betrachten. {item} ist eine Abkürzung für {item: item} . {...item} ist eine Abkürzung für Flatten/Shallow Copy/Spread in ein neues Objekt.

Sobald jemand versteht, dass jsx in h(name: string | Component, props: {[name]: any}, ...children) transpiliert. ObjectExpression fällt natürlich hinein.

Es ist verwirrend, dass <Foo {x} /> nicht unterstützt wird, aber <Foo {...x} /> unterstützt wird. Die Problemumgehung ist
<Foo {...{x}} /> was viel verwirrender ist.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen