Question

我正在尝试延迟加载这样的组件：

const NewPost = React.lazy(() => import('./NewPost/NewPost'));

然后我想将其加载到这样的路由中：

<Route 
    path="/new-post" 
    render={() => (
        <Suspense fallback={<div>Loading...</div>}>
            <NewPost />
        </Suspense>
    )} 
/>

我的NewPost定义如下：

interface INewPostProps extends RouteComponentProps<any> {}

interface INewPostState {
  title: string;
}

class NewPost extends React.Component<INewPostProps, INewPostState> {

但是我得到这个错误：

类型“ {}”不可分配给类型“ INewPostProps”。类型“ {}”中缺少属性“历史”。

参考以下行：在Route => Suspense中。

我想念什么？

PS：我stackoverflow最好的地方来询问/查找有关打字稿的信息/做出反应？

Answer 1

您的NewPost React组件需要RouteComponentProps中的属性，但是在渲染<NewPost />时并没有设置它们

路线render方法会收到您忽略的道具，您可以这样重写：

<Route
  path="/new-post"
  render={(props) => (
    <Suspense fallback={<div>Loading...</div>}>
      <NewPost {...props} />
    </Suspense>
  )}
/>

回想一下，Route render方法采用了React.SFC，这是您的匿名箭头函数，它接收由react-router注入的道具

此处的props变量将被键入为RouteComponentProps<any, StaticContext, any>，因此您可以将它们扩展到NewPost实例上，以满足其prop约束

Typescript反应路线中的惰性负载组件

1 个答案: