無狀態和無屬性元件

沒有狀態且沒有屬性的最簡單的反應元件可以寫成：

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 元件稍後可以被任何其他實際頁面用作基本模板。