4 ms·
I'd still _loooove_ to have "prop punning", ie, shorthand passing of props based on local variable names equivalent to ES6 object literal shorthand: <MyLis
by acemarke 6y ago
I'd still _loooove_ to have "prop punning", ie, shorthand passing of props based on local variable names equivalent to ES6 object literal shorthand:
<MyList items selectedItem onItemClicked />
Doesn't seem too likely to happen at this point, though.
- jameslk 6y agoWhile not as sexy, you can do: <MyList {...{items, selectedItem, onItemClicked}} /> There's a lot of "gets you most of the way there" hacks with JSX that will fill most needs. Where as you can imagine the incredible cacophony of screaming developers who maintain TypeScript, Preact, IDEs, etc. that would be incensed by breaking changes to JSX introduced just to solve some inconveniences.
- acemarke 6y agoTrust me, I'm well aware of both of those facts :) Doesn't mean the syntax _can't_ change . After all, the `<>` shorthand syntax for fragments was added via cooperation with the Babel and TypeScript teams, and the work on the new `jsx()` replacement for `createElement()` is going the same way.
- Gaelan 6y agoThat conflicts with HTML syntax, no? <input disabled /> is equivalent to <input disabled={true} />.
- acemarke 6y agoWhich is why the current JSX syntax uses that as a synonym for `disabled={true}`. Agreed that it matches HTML better, but having written an awful lot of `someLongVariableName={someLongVariableName}`, I sure wish I could stop repeating myself there.
- floydnoel 6y agoI, too, find it ridiculous to repeat `foo={foo}` over and over again. So I use the spread operator with ES6 shorthand object syntax. Now it’s `{...{ foo }}`. No breaking changes needed!
- efrafa 6y agoThat would just be confusing. What would happen with <input disabled /> then? What if there is a global disabled var?
- tW4r 6y agoI agree, I think <Element {prop} /> works better
- scns 6y agoReasonML works like that
- azangru 6y agoI thought this style was generally disfavored? It's perfectly possible to pass `true` as a valueless prop (<MyComponent disabled />); and yet either the default typescript linter, or typescript itself (I never investigated) complains of this syntax.