reactjs - tsx を使用した React アプリケーションでの条件付きレンダリング

Question

Microsoft が提供するデフォルトの React テンプレートを使用して、React アプリケーションの状態に基づいてユーザーにビューをレンダリングしようとしています。

これが私が得ているエラーです:

エラーの写真

これが私のコードです：

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { NextButton } from './shared/NextButton'
import { StationZero } from './stations/StationZero';

interface BiodieselStudioState {
    station: string[];
    stationNumber: number;
}

export class BiodieselStudio extends 
React.Component<RouteComponentProps<{}>, BiodieselStudioState> {
    constructor() {
        super();

        this.state = {
            station: ["StationZero", "StationOne", "StationTwo",
                    "StationThree", "StationFour", "StationFive",
                    "StationSix", "StationSeven"],
            stationNumber: 0
        };
}

public render() {
    return (
        <div>
            <h1>BIODIESEL STUDIO!</h1>
            { this.chooseStation(this.state.stationNumber) }
            <NextButton />
        </div>
    );
}

chooseStation(stationNumber: number) {
    switch(stationNumber) {
        case 0: {
            return <StationZero />
            break;
        }
        case 1: {

            break;
        }
        case 2: {

            break;
        }
        case 3: {

            break;
        }
        case 4: {

            break;
        }
        case 5: {

            break;
        }
        case 6: {

            break;
        }
        case 7: {

            break;
        }
        case 8: {

            break;
        }
        default: {

        }
    }
}

非常に異なるユーザー インターフェイスをロードする必要がありますが、これは基本的にステーション ビューのホストであり、子コンポーネントによってユーザーがアクティビティを完了し、BiodieselStudio の状態を更新して、アプリが機能するようにするという考え方です。必要に応じて。

ケースステートメントの多くは記入されていませんが、同じパターンに従います!

よろしくお願いします！