如何将道具传递给 Ionic React 中的选项卡

Question

我试图将一个数组作为道具传递给选项卡，但我遇到了一个令人困惑的错误。

代码如下：

 <IonRouterOutlet>
      <Route path="/tab1" render={props => (<Tab1 loanProps={loans}  />)} /> />
      <Route path="/tab2" component={Tab2} />
      <Route path="/tab3" component={Tab3} />
      <Route path="/" render={() => <Redirect to="/tab1" />} />
 </IonRouterOutlet>

Here is the error that shows when I hover over Tab1

这就是它所说的

Type '{ loanProps: Loan[]; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'loanProps' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'

我也不确定如何访问tab1页面中的道具。我正在尝试在此处映射作为道具传递的数组：

const Tab1: React.FC = () => {
 
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Select A Loan</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding"

        <IonList>
          {loans && loans.map((loan, index) => <IonItem key={index}><IonText>{loan.name} {loan.principle} {loan.interest}</IonText></IonItem>)}
        </IonList>
     
      </IonContent>
    </IonPage>
  );
};

如有任何帮助，我们将不胜感激。

Answer 1

你可以试试：

const Tab1: React.FC<{loan:any[]}> = ({loan}) ...

和

<Route path="/tab1" render={loans => (<Tab1 loan={loans}  />)} /> />

如何将道具传递给 Ionic React 中的选项卡

How to pass props to tab in Ionic React

typescript

ionic-react

react-typescript