Условный рендеринг в приложении React с использованием tsx
Я пытаюсь отобразить представление для пользователя на основе состояния, в котором он находится в приложении 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 не заполнены, но они будут следовать той же схеме!
Заранее огромное спасибо вам, ребята!
Это строка, которая возвращает <StationZero />, и ее можно найти под случаем 0 моей функции selectStation @FuzzyTree.
Ответы 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
}
Это было решение моей проблемы. Спасибо!
Что такое строка 36 файла BiodieselStudio.tsx?