search

facebook / jsx

The JSX specification is a XML-like syntax extension to ECMAScript.
http://facebook.github.io/jsx/
1.95k stars 133 forks source link

Proposal: template literal properties #110

Closed jamesknelson closed 5 years ago

jamesknelson commented 5 years ago

One thing that feels a little odd about JSX is that it's possible to pass single quote ' and double quote " string literals as props:

<div className="test" id='test' />

But it isn't possible to pass template literals in without wrapping them in braces:

// syntax error
<div className=`Panel ${active ? 'active' : ''}` id='test' />

I understand why braces are needed for things like numbers, arrays, or even objects - but template literals feel like another kind of string. They'd also make setting CSS class names like the one above a lot more ergonomic.

One issue I can see is that template literals can be preceded by a tag expression, which doesn't look so great:

// this probably shouldn't work
<div className=tag`Panel ${active ? 'active' : ''}` id='test' />

But perhaps it'd be possible to just support tagless string literals as props?

jamesknelson commented 5 years ago

Oops, this is a duplicate of #25. Sorry.