route.component 没有任何构造或调用签名 - 使用 TypeScript 的 React Router [英] route.component does not have any construct or call signatures - React Router with TypeScript

问题描述

路由是根据对象列表构建的.但是打字稿突出显示了错误:

Routes are built from a list of objects. But typescript is highlighting the error:

(属性) IRoute.component: React.ReactNodeJSX 元素类型route.component"没有任何构造或调用签名.

(property) IRoute.component: React.ReactNode JSX element type 'route.component' does not have any construct or call signatures.

在纯 JavaScript 中，一切都很好.如何修复 TypeScript 错误?

In pure JavaScript, everything works great. How to fix the TypeScript error?

import React from 'react'
import {
  HashRouter as Router,
  Route,
  Switch,
  Redirect,
  RouteComponentProps,
} from 'react-router-dom'

import { ReduxType } from '../container/Container'
import ThemeWrapper from './ThemeWrapper'
import ErrorWrapper from './ErrorWrapper'
import NotifyWrapper from './NotifyWrapper'
import mainPage from './mainLayout/views/Page'
import requestsPage from './requestsLayout/views/Page'
import palettePage from './paletteLayout/views/Page'

interface IRoute {
  key?: number
  path: string
  component: React.ReactNode
  exact: boolean
}

interface IRouteList extends Array<IRoute> {}

const routeList: IRouteList = [
  // {path: '', component: React.ReactNode, [exact]}
  { path: '/', component: mainPage, exact: true },
  { path: '/requests', component: requestsPage, exact: true },
  { path: '/palette', component: palettePage, exact: true },
]

//const AppRouter = (): JSX.Element => {
class AppRouter extends React.Component<ReduxType, any> {
  public render() {
    console.log('AppRouter:' + JSON.stringify(this.props))
    return (
      <ThemeWrapper palette={this.props.palette}>
        <ErrorWrapper>
          <NotifyWrapper>
            <Router>
              <Switch>
                {routeList.map((route, i) => (
                  <Route
                    key={i}
                    render={(props: RouteComponentProps<{}>) => (
                      <route.component {...this.props} />
                    )}
                    path={route.path}
                    exact={route.exact}
                  />
                ))}
                <Redirect to="/" />
              </Switch>
            </Router>
          </NotifyWrapper>
        </ErrorWrapper>
      </ThemeWrapper>
    )
  }
}

export default AppRouter

推荐答案

你应该使用 ComponentType 来定义 React 组件类型，而不是 ReactNode.

You should use ComponentType for defining React component types instead of ReactNode.

interface IRoute {
  key?: number
  path: string
  component: React.ComponentType // HERE
  exact: boolean
}

---

下面是ReactNode的定义:

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

非常适合用于反应儿童".

which is much suitable for being used for react "children".

而且，这里是ComponentType:

type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;

专门用于组件 - 函数和类.

which is specially for components - function and class.

错误:

XYZ 没有任何构造或调用签名

XYZ does not have any construct or call signatures

上述错误试图提示您当前类型，即ReactNode"没有构造函数"；这是 React Components (ComponentType) 中必需的(并且存在的).

Above error is trying to hint you that current type i.e. "ReactNode" doesn't have a "constructor" which is required (and present) in React Components (ComponentType).

这是一个很好的 React-TypeScript 备忘单:https://github.com/typescript-cheatsheets/反应

Here is a good React-TypeScript cheatsheet: https://github.com/typescript-cheatsheets/react

这篇关于route.component 没有任何构造或调用签名 - 使用 TypeScript 的 React Router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！