React Using ReactJS with Typescript Stateless and property-less Components


Example

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 => () => 
    <Container>
        <NavTop />
        {props.children}
        <NavBottom />
    </Container>

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

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