You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When "jsx" is set to "react-jsx" the key property is missing from parameters passed to jsx function and instead is passed as separate argument.
For example:
<Testparam="1"key="2"/>
Is compiled into:
jsx_(Test,{param: '1'},'2')
My suggestion is to ignore this behavior unless "key" property is defined as IntrinsicAttribute.
Then, if key is not an intrinsic attribute, the example should compile into:
jsx_(Test,{param: '1',key: '2'})
π Motivating Example
It makes TSX more generic for use by any library, and less React specific
π» Use Cases
This special treatment of "key" property is at odds with libraries other that react that DON'T treat key differently, making if effectively an restricted parameter.
As a workaround, you can merger parameters with key inside jsx function:
It makes TSX more generic for use by any library, and less React specific
But... you specifically asked for react-jsx...
If react-jsx is to be used only with react, then why don't we have "jsxImportSource" hardcoded to "react"? Or in other words, the ONLY way to use tsx for anything other than react is to set "jsx" to "preserve", because only "preserve" doesn't have the word react in it. Is that the official stance of TypeScript?
View frameworks exist that are not React, not React-compatible, but still are compatible only in the jsx function.
There's also the react preset for Typescript, which transforms to a function call (usually named React.createElement or h) with slightly different children semantics, and has no special semantics for key.
π Search Terms
jsx, react-jsx, key property
β Viability Checklist
β Suggestion
When "jsx" is set to "react-jsx" the key property is missing from parameters passed to jsx function and instead is passed as separate argument.
For example:
Is compiled into:
My suggestion is to ignore this behavior unless "key" property is defined as
IntrinsicAttribute
.Then, if key is not an intrinsic attribute, the example should compile into:
π Motivating Example
It makes TSX more generic for use by any library, and less React specific
π» Use Cases
This special treatment of "key" property is at odds with libraries other that react that DON'T treat key differently, making if effectively an restricted parameter.
As a workaround, you can merger parameters with key inside jsx function:
But this may lead to weird special cases, like this:
key attribute will override existing key property from
params
.Please make tsx friendly for libraries other than react.
The text was updated successfully, but these errors were encountered: