Skip to content

Commit a6b2b89

Browse files
authored
Describe use of generic components with JSX
Look vaguely familiar? It should: microsoft/TypeScript#3960 (comment)
1 parent 80296d3 commit a6b2b89

File tree

1 file changed

+16
-0
lines changed

1 file changed

+16
-0
lines changed

docs/jsx/tsx.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,22 @@ const bar: React.ReactElement<MyAwesomeComponent> = <NotMyAwesomeComponent/>; //
8686

8787
> Of course you can use this as a function argument annotation and even React component prop member.
8888

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 = ()=> <StringSelect items={['a','b']} />;
104+
```
89105
## Non React JSX
90106
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:
91107

0 commit comments

Comments
 (0)