mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
6922165cbb
This allows passing children to `StatelessComponent<P>` exactly like base components without the need to use React.Props<T> or extending the P interface with an explicit 'children' property:
# Before
````typescript
type FooProps = {
bar: number;
}
const Foo: React.SFC<FooProps> = props => (
<div>
{props.children} = {props.bar} // error TS2459: Type 'FooProps' has no property 'children' and no string index signature.
</div>
);
````
# After
````typescript
type FooProps = {
bar: number;
}
const Foo: React.SFC<FooProps> = props => (
<div>
{props.children} = {props.bar}
</div>
);
<Foo bar="42">6×9</Foo> // <div>6×9 = 42</div>
````
26 lines
585 B
TypeScript
26 lines
585 B
TypeScript
import React = require("react");
|
|
|
|
interface SCProps {
|
|
foo?: number;
|
|
}
|
|
|
|
var StatelessComponent: React.SFC<SCProps> = ({ foo }: SCProps) => {
|
|
return <div>{ foo }</div>;
|
|
};
|
|
StatelessComponent.displayName = "StatelessComponent3";
|
|
StatelessComponent.defaultProps = {
|
|
foo: 42
|
|
};
|
|
|
|
<StatelessComponent />;
|
|
|
|
var StatelessComponent2: React.SFC<SCProps> = ({ foo, children }) => {
|
|
return <div>{ foo }{ children }</div>;
|
|
};
|
|
StatelessComponent2.displayName = "StatelessComponent4";
|
|
StatelessComponent2.defaultProps = {
|
|
foo: 42
|
|
};
|
|
|
|
<StatelessComponent2>24</StatelessComponent2>;
|