Question

我只想将接口成员类型限制为，下面的代码似乎不起作用。

import React, { ReactElement } from "react";
import { Route, RouteProps } from 'react-router-dom';

import Menu from 'feature/system/menu/Menu';

export interface IRouteConfig{
  readonly path: string,
  readonly name: string,
  readonly comp: ReactElement<RouteProps>,
}

const routes: IRouteConfig[] = [
    {path: "/feature/system/menu/correct", name: "correct menu", comp: <Route path="/feature/system/menu"><Menu /></Route>},
    {path: "/feature/system/menu/error", name: "error menu", comp: <Menu />},
];

export default routes;

我所例外的是路由第二行的编译器错误，但没有任何错误。正确的方法是什么？

Answer 1

JSX：

comp = <Route path="/feature/system/menu"><Menu /></Route>

等于普通的javascript

comp = Route({path:"/feature/system/menu", children: Menu()});

即，运行带有参数Route和path的函数children，然后将函数返回值分配给comp。

因此，通过给comp提供类型，您实际上是在输入Route的返回值，打字稿不知道什么参数您给它，所以它不能被输入！

PS：如果要键入函数的参数，则需要在函数中声明它。

export const Menu = (props:RouteProps) => {
...
}

或

export function Menu(props:RouteProps) {
...
}

通过打字稿，如何在接口中声明特定ReactElement类型的成员

1 个答案: