Reactjs 如何在typescript接口中放置React组件？

如果我将“组件”的类型定义为：

从“React”导入React；
从“react router dom”导入{Redirect，Route}；
从“/auth.api”导入{WEB_APP_TOKEN_KEY}；
导出接口IAuthRouteProps{
组件：任意//React.component
路径：字符串
}
const AuthRoute:React.FC=（道具）=>{
if（！localStorage.getItem（WEB\u APP\u TOKEN\u KEY））{
返回；
}
返回；
};
导出默认AuthRoute；

这就是它的用法

 <Switch>
          <Route exact path="/" component={MainPage}/>
          <AuthRoute path="/cars" component={CarPage}/>
 </Switch>

---

在界面中，我希望输入的项目“componenten”不是“any”，而是一个React组件。这是可能的吗？

只需以与声明功能组件相同的方式声明它，以及所有需要的道具：

导出接口IAuthRouteProps{
组件：React.FC
路径：字符串
}

---

如果您不想对所需的组件类型如此精确（

MainPage

或

CarPage

），只需使用

React.FC

，无需一般性声明。

React.ComponentType

？太完美了。我的请求仍然是热情的，并且已经得到了解决。非常感谢。您可能不想将自己仅限于功能组件。如果他只使用功能组件，则完全可以，如果他使用全局

React.ComponentType

：：最好尽可能精确。通过React.FC在枚举中包括的所有允许组件都是偶数更好。谢谢你。嗯，但不太准确。如果只有

MainPage

和

CarPage

应该进行身份验证，那么最好这样声明它们。因此，您确定除了

MainPage

和

CarPage

之外，没有其他组件会在道具中传递。我只是尝试了一下，意识到我误解了它。如何定义CarPageProps？

 <Switch>
          <Route exact path="/" component={MainPage}/>
          <AuthRoute path="/cars" component={CarPage}/>
 </Switch>