Условный рендеринг в приложении React с использованием TSX

Question

Я пытаюсь отобразить представление для пользователя в зависимости от состояния, в котором он находится в приложении React, с использованием шаблона React по умолчанию, который предоставляет Microsoft.

Вот ошибка, которую я получаю:

картина ошибки

Вот мой код:

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, что сделает его так, чтобы приложение работало по мере необходимости.

Многие операторы case не заполнены, но будут следовать той же схеме!

Огромное спасибо заранее, ребята!

Answer 1

По ошибке ваш StationZero компонент имеет RouteComponentProps<{}> определено для его реквизита

т.е.

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

Но вы не проходите мимо RouteComponentProps так как вы не монтируете компонент через react-router,

Вы можете исправить эту ошибку, удалив RouteComponentProps<{}> от StationZero определение компонента:

class StationZero extends React.Component {

Также удалите это break исправить ошибку "недоступный код".

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