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
Copy file name to clipboardExpand all lines: docs/jsx/tsx.md
+16Lines changed: 16 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -86,6 +86,22 @@ const bar: React.ReactElement<MyAwesomeComponent> = <NotMyAwesomeComponent/>; //
86
86
87
87
> Of course you can use this as a function argument annotation and even React component prop member.
88
88
89
+
### React JSX Tip: Generic components
90
+
There's no syntax in JSX to apply generic parameters to a generic component; a type and constructor must first be created in Typescript proper. Example:
91
+
92
+
```ts
93
+
/** A generic component */
94
+
type SelectProps<T> = { items: T[] }
95
+
class Select<T> extends React.Component<SelectProps<T>, any> { }
96
+
97
+
/** Specialize Select to use with strings */
98
+
interface IStringSelect { new (): Select<string> } ;
99
+
/** Constructor function - must be capitalized for JSX
100
+
const StringSelect = Select as IStringSelect;
101
+
102
+
/** Usage */
103
+
const Form = ()=> <StringSelectitems={['a','b']} />;
104
+
```
89
105
## Non React JSX
90
106
TypeScript provides you with the ability to use something other than React with JSX in a type safe manner. The following lists the customizability points, but note that this is for advanced UI framework authors:
0 commit comments