1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : typeof React
interface ComponentProps {
>ComponentProps : ComponentProps
AnyComponent: React.StatelessComponent<any> | React.ComponentClass<any>;
>AnyComponent : React.StatelessComponent<any> | React.ComponentClass<any>
>React : any
>StatelessComponent : React.StatelessComponent<P>
>React : any
>ComponentClass : React.ComponentClass<P>
}
class MyComponent extends React.Component<ComponentProps, {}> {
>MyComponent : MyComponent
>React.Component : React.Component<ComponentProps, {}>
>React : typeof React
>Component : typeof React.Component
>ComponentProps : ComponentProps
render() {
>render : () => JSX.Element
const { AnyComponent } = this.props;
>AnyComponent : React.StatelessComponent<any> | React.ComponentClass<any>
>this.props : ComponentProps
>this : this
>props : ComponentProps
return (<AnyComponent />);
>(<AnyComponent />) : JSX.Element
><AnyComponent /> : JSX.Element
>AnyComponent : React.StatelessComponent<any> | React.ComponentClass<any>
}
}
// Stateless Component As Props
<MyComponent AnyComponent={() => <button>test</button>}/>
><MyComponent AnyComponent={() => <button>test</button>}/> : JSX.Element
>MyComponent : typeof MyComponent
>AnyComponent : any
>() => <button>test</button> : () => JSX.Element
><button>test</button> : JSX.Element
>button : any
>button : any
// Component Class as Props
class MyButtonComponent extends React.Component<{},{}> {
>MyButtonComponent : MyButtonComponent
>React.Component : React.Component<{}, {}>
>React : typeof React
>Component : typeof React.Component
}
<MyComponent AnyComponent={MyButtonComponent} />
><MyComponent AnyComponent={MyButtonComponent} /> : JSX.Element
>MyComponent : typeof MyComponent
>AnyComponent : any
>MyButtonComponent : typeof MyButtonComponent
|
