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中的状态，这将使得它该应用程序可以根据需要运行。

许多案例陈述没有填写，但它将遵循相同的模式！

非常感谢你们！

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
}

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

1 个答案: