4 ms·
This might be a silly question, but was there ever any thought put towards using ES6 Template Strings rather than the JSX syntax additions? For example: cl
by thomasfoster96 11y ago
This might be a silly question, but was there ever any thought put towards using ES6 Template Strings rather than the JSX syntax additions? For example:
class OuterComponent extends React.Component {
render() {
return (
<MixinComponent>
<InnerComponent />
</MixinComponent>
);
}
}
Being replaced by something more like:
class OuterComponent extends React.Component {
render() {
return JSX`
<MixinComponent>
<InnerComponent />
</MixinComponent>
`;
}
}
- Honzo 11y agoWould you be able to use template strings inside the template if this was the case?
- k__ 11y agoGood point. Since JSX is just JavaScript, it doesn't have any problems with nesting.
- thomasfoster96 11y agoYes, template strings can be nested (well, they can using Babel).
- empyrical 11y agoThis works for me in the latest Chrome too: `${`test`}`
- ksherlock 11y agoSee also https://facebook.github.io/jsx/#why-not-template-literals https://facebook.github.io/jsx/#why-not-template-literals
- thomasfoster96 11y agoRightio, that sort of explains their rationale. Although this doesn't really help: However, this would lead to further divergence. Tooling that is built around the assumptions imposed by template literals wouldn't work. It would undermine the meaning of template literals. It would be necessary to define how JSX behaves within the rest of the ECMAScript grammar within the template literal anyway. I'm not really what the problem is here. Template strings seem to have been put in ES6 partly to do what JSX does, so it seems very odd that anyone went to the lengths of defining a language extension rather than use them.
- asolove 11y agoAs I understand it, the problem is that template strings evaluate to strings, whereas JSX evaluates to function calls creating a data structure. So render would produce a string, React would have to parse it back out of the XML syntax to figure out the structure of the data hidden in the string, and then make function calls. That's expensive. More importantly, how would you share data structures? `<Todos items=${someObject}>` would return a string with the string representation of someObject, but it wouldn't be the same object, have methods, etc.
- clessg 11y agoYou could probably use a tagged template literal that would return an object representation of the given string. Tagged template literals don't have to return strings; jsx`<Todos items=${someObject}>` could return an Element object, for example.
- madeofpalk 11y agoBut the input is still a string? I think it's helpful to know that when you see JSX like this: <MixinComponent> <InnerComponent name='madeofpalk'/> </MixinComponent> JSX will convert that into regular JS which will look like element('MixinComponent', {}, element('InnerComponent', {name: 'madeofpalk'}) ) Parsing that string during runtime to produce the above data structure isn't ideal.
- kentor 11y agoTooling and static analysis. ESLint can tell me if `MixinComponent` is undefined during parse time.
- AgentME 11y ago"MixinComponent" and "InnerComponent" are identifiers of regular javascript variables. You would need to wrap them each with ${}. Also, the string would have to be parsed every time render() is called.