0

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

这是代码：

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

这是我将鼠标悬停在 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>
  );
};

任何帮助将不胜感激，谢谢。

4

1 回答 1

1

你可以试试：

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

和

<Route path="/tab1" render={loans => (<Tab1 loan={loans}  />)} /> />
于 2020-08-10T19:03:00.540 回答