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.
