vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2025-10-16 12:05:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use ComponentType for React.Fragment

Browse Source
This commit is contained in:
John Gozde 2017-12-04 10:27:42 -07:00
parent 34f6a6d096
commit d105bd4c8d
3 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
types/react/index.d.ts vendored
View File

@ -265,7 +265,7 @@ declare namespace React {
function isValidElement<P>(object: {} | null | undefined): object is ReactElement<P>;
const Children: ReactChildren;
const Fragment: symbol | number;
const Fragment: ComponentType;
const version: string;
//
@ -281,10 +281,8 @@ declare namespace React {
constructor(props: P, context?: any);
// Disabling unified-signatures to have separate overloads. It's easier to understand this way.
// tslint:disable:unified-signatures
setState<K extends keyof S>(f: (prevState: Readonly<S>, props: P) => Pick<S, K>, callback?: () => any): void;
setState<K extends keyof S>(state: Pick<S, K>, callback?: () => any): void;
// tslint:enable:unified-signatures
setState<K extends keyof S>(f: (prevState: Readonly<S>, props: P) => Pick<S, K>, callback?: () => any): void; // tslint:disable-line:unified-signatures
setState<K extends keyof S>(state: Pick<S, K>, callback?: () => any): void; // tslint:disable-line:unified-signatures
forceUpdate(callBack?: () => any): void;
render(): ReactNode;
@ -3519,17 +3517,15 @@ declare namespace React {
declare global {
namespace JSX {
// tslint:disable:no-empty-interface
interface Element extends React.ReactElement<any> { }
interface Element extends React.ReactElement<any> { } // tslint:disable-line:no-empty-interface
interface ElementClass extends React.Component<any> {
render(): React.ReactNode;
}
interface ElementAttributesProperty { props: {}; }
interface ElementChildrenAttribute { children: {}; }
interface IntrinsicAttributes extends React.Attributes { }
interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> { }
// tslint:enable:no-empty-interface
interface IntrinsicAttributes extends React.Attributes { } // tslint:disable-line:no-empty-interface
interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> { } // tslint:disable-line:no-empty-interface
interface IntrinsicElements {
// HTML

6
types/react/test/index.ts
View File

@ -164,7 +164,7 @@ const statelessElement: React.SFCElement<SCProps> = React.createElement(Stateles
const domElement: React.DOMElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> = React.createElement("div");
const htmlElement = React.createElement("input", { type: "text" });
const svgElement = React.createElement("svg", { accentHeight: 12 });
const fragmentElement: React.ReactElement<undefined> = React.createElement(React.Fragment, undefined, [React.createElement("div"), React.createElement("div")]);
const fragmentElement: React.ReactElement<{}> = React.createElement(React.Fragment, {}, [React.createElement("div"), React.createElement("div")]);
const customProps: React.HTMLProps<HTMLElement> = props;
const customDomElement = "my-element";
@ -229,7 +229,7 @@ const notValid: boolean = React.isValidElement(props); // false
const isValid = React.isValidElement(element); // true
let domNode: Element = ReactDOM.findDOMNode(component);
domNode = ReactDOM.findDOMNode(domNode);
const fragmentType: symbol | number = React.Fragment;
const fragmentType: React.ComponentType = React.Fragment;
//
// React Elements
@ -255,7 +255,7 @@ myComponent.reset();
// Refs
// --------------------------------------------------------------------------
// tslint:disable:no-empty-interface
// tslint:disable-next-line:no-empty-interface
interface RCProps { }
class RefComponent extends React.Component<RCProps> {

14
types/react/test/tsx.tsx
View File

@ -63,3 +63,17 @@ const StatelessComponentWithoutProps: React.SFC = (props) => {
return <div />;
};
<StatelessComponentWithoutProps />;
// Fragments
<div>
<React.Fragment>
<React.Fragment key="foo">
<span>Child 1</span>
<span>Child 2</span>
</React.Fragment>
<React.Fragment key="bar">
<span>Child 3</span>
<span>Child 4</span>
</React.Fragment>
</React.Fragment>
</div>;