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

Question

我正在尝试使用 Microsoft 提供的默认 React 模板，根据用户在 React 应用程序中的状态向用户呈现视图。

这是我遇到的错误：

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: {

        }
    }
}

我必须在非常不同的用户界面中加载，但这基本上是站视图的主机，想法是子组件将让用户完成 activity 并更新 BiodieselStudio 中的状态这将使该应用程序按需运行。

很多 case 语句没有填写，但它会遵循相同的模式！

非常感谢你们！

Answer 1

根据错误，您的 StationZero 组件已为其 propsRouteComponentProps<{}> 定义

即

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

但是你没有传递它 RouteComponentProps 因为你没有通过 react-router.

安装组件

您可以通过从 StationZero 组件定义中删除 RouteComponentProps<{}> 来修复此错误：

class StationZero extends React.Component {

同时删除此 break 以修复 'unreachable code' 错误。

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

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

Conditional Rendering in React application using tsx

frontend

typescript

reactjs

react-tsx