reactjs - 使用tsx在React应用程序中进行条件渲染

我试图使用微软提供的默认反应模板，基于用户在AcRead应用程序中的状态来查看用户。
下面是我得到的错误：
picture of error
这是我的代码：

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中的状态，这将使应用程序按照需要工作。
很多情况下的语句没有填写，但它将遵循相同的模式！
非常感谢你们！

最佳答案

根据您的StationZero组件为其道具定义的错误
即

class StationZero extends React.Component<RouteComponentProps<{}>> {

但你没有通过它，因为你没有通过RouteComponentProps<{}>安装组件。
可以通过从RouteComponentProps组件定义中删除react-router来修复此错误：

class StationZero extends React.Component {

还要删除此RouteComponentProps<{}>以修复“无法访问的代码”错误。

case 0: {
    return <StationZero />
    break; // not reachable because of return
}