React Using ReactJS with Typescript Stateless and property-less Components


The simplest react component without a state and no properties can be written as:

import * as React from 'react';

const Greeter = () => <span>Hello, World!</span>

That component, however, can't access this.props since typescript can't tell if it is a react component. To access its props, use:

import * as React from 'react';

const Greeter: React.SFC<{}> = props => () => <span>Hello, World!</span>

Even if the component doesn't have explicitly defined properties, it can now access props.children since all components inherently have children.

Another similar good use of stateless and property-less components is in simple page templating. The following is an examplinary simple Page component, assuming there are hypothetical Container, NavTop and NavBottom components already in the project:

import * as React from 'react';

const Page: React.SFC<{}> = props => () => 
        <NavTop />
        <NavBottom />

const LoginPage: React.SFC<{}> = props => () =>
        Login Pass: <input type="password" />

In this example, the Page component can later be used by any other actual page as a base template.