javascript - React の JSX / TSX 内から HOC を直接呼び出すことはできますか?

Question

renderTypeScript で React HOC を使用していますが、TSX コンポーネントメソッド内から呼び出すと機能しないようです。次に例を示します。

export class HelloWorldComponent extends React.Component<{}, {}> {
    public render(): JSX.Element {
        return <div>Hello, world!</div>;
    }
}

export const withRedText = (Component) => {
    return class WithRedComponent extends React.Component<{}, {}> {
        public render(): JSX.Element {                
            return (
                <div style={{color: "red"}}>
                    <Component {...this.props} />
                </div>
            );
        }
    };
}; 

export const HelloWorldComponentWithRedText = withRedText(HelloWorldComponent);

次のように、親 JSX ファイルからこれを呼び出しています。

public render(): JSX.Element {
    return (
       <div>
           Test #1: <HelloWorldComponent/>
           Test #2: <HelloWorldComponentWithRedText />
           Test #3: { withRedText(<HelloWorldComponent />) }
       </div>
    )
}

1 番目と 2 番目のテストは期待どおりに機能します。2 番目のテストではテキストが赤くなります。しかし、3 行目は何もレンダリングしません。2 行目と 3 行目は同じだと思っていました。

デバッガーでステップ実行すると、テスト #2 の引数はタイプ のコンポーネントですHelloWorldComponentが、テスト #3 ではComponent = Object {$$typeof: Symbol(react.element), ...}.

{ withRedText(<HelloWorldComponent />) }JSX/TSX ファイル内からのような構文でコンポーネントを動的にラップする方法はありますか?

(TypeScript 2.1.4 & React 15.4.0)

これはCodePenにあります