Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // various examples of typescript stateless component declarations
- import * as React from "react";
- ////////////////
- interface IVerboseStatelessComponentProps extends React.HTMLProps<JSX.Element> {
- myvar: string;
- onClick: () => void;
- }
- export const VerboseStatelessComponent: React.StatelessComponent<IVerboseStatelessComponentProps> =
- (props: IVerboseStatelessComponentProps): JSX.Element => {
- return (
- <div onClick={props.onClick}>Hello, {props.myvar} </div>
- );
- };
- ////////////////
- export const SimpleStatelessComponent = ({myvar, onClick}: {myvar: string, onClick: () => void}) : JSX.Element => {
- return (
- <div onClick={onClick}>Hello, {myvar}</div>
- );
- };
- ////////////////
- interface IAnotherSimpleStatelessComponentProps extends React.HTMLProps<JSX.Element> {
- myvar: string;
- onClick?: MouseEventHandler<JSX.Element | HTMLElement>;
- }
- export const AnotherSimpleStatelessComponent = ({myvar, onClick}: IAnotherSimpleStatelessComponentProps) : JSX.Element => {
- return (
- <div onClick={onClick}>Hello {myvar} </div>
- );
- };
- ////////////////
- export const TerseStatelessComponent = ({myvar, onClick}) => {
- return (
- <div onClick={onClick}>Hello, {myvar}</div>
- );
- };
- ////////////////
- interface IReallyVerboseStatelessComponentProps<T extends HTMLElement | JSX.Element> extends React.HTMLProps<JSX.Element> {
- myvar: string;
- onClick?: MouseEventHandler<JSX.Element | HTMLElement>;
- }
- export const ReallyVerboseStatelessComponent: React.StatelessComponent<IReallyVerboseStatelessComponentProps<HTMLDivElement>> =
- (props: IReallyVerboseStatelessComponentProps<HTMLDivElement>): JSX.Element => {
- return (
- <div onClick={props.onClick}>Hello {props.myvar} </div>
- );
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement