在 Ionic/React 中尝试对状态对象进行道具钻取时出现 TypeScript 编译错误

Question

我正在尝试通过 app.tsx 中的组件道具深入了解应用程序状态，但收到打字稿错误：

Type '{ dailyObd: RouteComponentProps<any, StaticContext, {}>; }' is not assignable to type 'IntrinsicAttributes & obds & { children?: ReactNode; }'.
  Property 'dailyObd' does not exist on type 'IntrinsicAttributes & obds & { children?: ReactNode; }'.ts(2322)

它指出错误的来源是 "dailyObd" in <Today dailyObd... in App's return.

这是我所得到的细目分类： app.tsx:

const App: React.FC = () => {
  const [dailyObds, setDailyObds] = useState<dailyObds>([{
    title: 'First',
    completed: false
  }])

  return (
    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            <Route path="/page/today" render={(dailyObds)=>(<Today dailyObd={dailyObds} /> )} />
            <Redirect from="/" to="/page/Inbox" exact />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  )
}

interface dailyObd{
    title: string
    completed: boolean
}
interface dailyObds extends Array<dailyObd>{}

export default App;

这里是Today.tsx：

const Today: React.FC = ({ dailyObd })=>{
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start"><IonMenuButton /></IonButtons>
          <IonTitle>Today</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonText>Some stuff will go here... eventually.</IonText>>
      </IonContent>
    </IonPage>
  )
}
export default Today

我在tsconfig.json中设置了strict为false，但是还是编译不通过，因为列出的错误。我在这里错过了什么？为什么使用 TypeScript 向组件添加 prop 看起来如此困难？感谢您的帮助，我是 Ionic/React/TypeScript.

的新手

Answer 1

您需要为 Today 组件提供类型。据我所知，Today 组件接受 dailyObd 作为道具，因此您需要为该组件创建一个接口或类型遗传。

此外，您可能希望重命名 dailyObd 界面以使用大驼峰命名法，因为这是 classes/interfaces.

的命名约定之一

interface DailyObd {
  title: string;
  completed: boolean;
}

现在，您可以为 Today.

提供通用类型参数

interface TodayProps {
  dailyObd: DailyObd[];
}

const Today: React.FC<TodayProps> = ({ dailyObd }) => { ... }

Answer 2

我似乎已经解决了下一个问题，这个问题是在我按照 wentjun 的建议将输入应用到 Today 组件后弹出的。根据对 wentjun 的回答的评论，我最终发现在路由的 render prop 中，传递给匿名函数的变量不是我创建的状态变量，尽管它具有相同的名称。当我从匿名函数声明中删除该变量时，我发现我创建的状态变量在创建时被传递到 Today 组件中，应用程序现在按预期工作。这是我确定的 TS：

App.tsx:

const App: React.FC = () => {

  const [dailyObds, setDailyObds] = useState<DailyObd[]>([{
    title: 'first',
    completed: false
  },{
    title: 'second',
    completed: true
  }])

  return (
    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            <Route path="/page/today" render={()=>(<Today dailyObdsProp={dailyObds} /> )} />
            <Redirect from="/" to="/page/Inbox" exact />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  )
}

interface DailyObd{
  title: string
  completed: boolean
}

export default App

Today.tsx:

const Today: React.FC<Today> = (dailyObdsProp)=>{
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start"><IonMenuButton /></IonButtons>
          <IonTitle>Today's Obds</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonText>
          {
            dailyObdsProp.dailyObdsProp.map(
              obd=>(
                <p>{obd.title} - {obd.completed ? 'Completed' : 'Uncomplete'}</p>
              )
            )
          }
        </IonText>
      </IonContent>
    </IonPage>
  )
}

interface Today{
  dailyObdsProp: DailyObd[]
}
interface DailyObd{
  title: string
  completed: boolean
}
export default Today

感谢大家的帮助！如果此解决方案有问题，请告诉我。

在 Ionic/React 中尝试对状态对象进行道具钻取时出现 TypeScript 编译错误

Getting TypeScript compile error when attempting prop drilling of state objects in Ionic/React

jsx

typescript

reactjs

ionic-framework

react-props