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中的标签

1 个答案: