无状态和无属性组件

没有状态且没有属性的最简单的反应组件可以写成：

import * as React from 'react';

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

但是，该组件无法访问 this.props，因为 TypeScript 无法判断它是否是反应组件。要访问其道具，请使用：

import * as React from 'react';

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

即使组件没有明确定义的属性，它现在也可以访问 props.children，因为所有组件本身都有子节点。

另一个类似的无状态和无属性组件的良好用法是简单的页面模板。以下是一个简单的简单 Page 组件，假设项目中已经存在假设的 Container，NavTop 和 NavBottom 组件：

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>

在此示例中，Page 组件稍后可以被任何其他实际页面用作基本模板。