TypeScript React Functional Component-类型'Element'缺少以下属性：类型，道具，键错误

debugcn 发表于 Dev

理查德

我有以下定义：

IRoute：


export interface IRoute{
    key: string, 
    path: string,
    exact: boolean,
    component: JSX.Element,
    private?: boolean
}

IRoutesConfig：

import { IRoute } from "./IRoute";

export default interface IRoutesConfig {
    [key : string] : [IRoute]
}

和我的Routes Configration，然后我将传递给一个类进行进一步的增强

import Login from "../container/Auth/Login/Login";
import IRoutesConfig from "./IRoutesConfig";

const Routes : IRoutesConfig = {
    "Auth": [
        {
            key: "login-page",
            exact: true, 
            component: Login,
            path: "/auth/login"
        }
    ]
}

export default Routes;

我正在使用登录功能组件进行测试：

import React, { FC, ReactElement } from 'react';

type LoginProps = {

}

const Login : FC<LoginProps> = (props) : ReactElement => {
  return (
    <>
    
    </>
  );
}

export default Login;

这是一个新的项目设置，尚未为登录道具定义任何内容。因此，它目前为空，以后将进行扩展，内容也一样，因为我们当前正在设置路线体系结构。

VSCode给我以下有关“ component ”的提示Routes:IRoutesConfig：

当然，我不是在声明类型，道具和键。

在结束路由配置将给予一个RouteManager，将动态地创建Routes为Switch的`阵营，路由器-DOM”，再加上一些其他的东西，不同的地方访问它。

它将创建路线图，例如：

<Route key="login-page" path="/auth/login" component={Login} />

然后在反应容器组件中使用它：

...

let authRoutes = RoutesManager.getAllRoutes("Auth");

return (
    <Switch>
      {authRoutes}
      <Redirect key="account-redirect" to="/account" />
    </Switch>
  );

问题：根据我的理解，react-router-dom route期望它是arg componenta JSX.element，但是我的Login功能组件的返回类型是ReactElement。据我所知，JSX.element在此上下文中是通用的ReactElement。Login FC将有孩子。

如何解决将登录FC正确传递到配置，以便稍后由react-router-dom的路由组件使用的问题？

侯赛因·艾哈迈迪（Hossein Ahmadi）

据我了解，错误是来自component: JSX.Element。而且您正在尝试通过向中添加private属性来创建受保护的路由Route。您可以更改IRoute接口以扩展react-router定义的类型，这样您就不会再遇到此问题了。

首先：添加此导入语句。

import { RouteProps } from "react-router-dom";

第二：更改您的IRoute界面：

export interface IRoute extends RouteProps{
    private?: boolean
}

这样，您只需告诉我myIRoute具有所有简单Route属性plus private。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

TypeScript React Functional Component-类型'Element'缺少以下属性：类型，道具，键错误

TypeScript React Functional Component-类型'Element'缺少以下属性：类型，道具，键错误

使用TypeScript设置React Component的状态类型

在Typescript中声明数组的对象；遇到错误，类型“ {}”缺少以下属性

Typescript Reactjs开玩笑/酶错误-'类型'any []'缺少以下属性...'

如何修复Typescript中的“以下属性中缺少类型'{}'...”错误？

在Typescript中声明数组的对象；遇到错误，类型“ {}”缺少以下属性

错误：“类型'{}'缺少类型的以下属性

TypeScript React Functional Component - is missing the following properties from type 'Element': type, props, key error

typescript eslint-类型x缺少类型x的以下属性

类型“ {}”缺少类型中的以下属性

可以接受任何类型的React Component作为支持的Typescript类型是什么？

可以接受任何类型的React Component作为支持的Typescript类型是什么？

TypeScript：无法理解此错误：Type：Foo缺少Bar类型的以下属性add，addAll，delete，keys和另外3个

RxJS分区。错误-类型缺少以下属性

类型“订阅”缺少以下属性

缺少类型'Observable <PizzaState>的以下属性

类型“ EventTarget”缺少以下属性

React Component上的打字稿错误：无法将'Element'类型的参数分配给该类型的参数

React.Component的通用类型

TypeScript和React中的联合类型道具

从React（TypeScript）导入事件类型

React TypeScript：onChange的正确类型

React Router的路径的TypeScript类型？

React Typescript createContext类型问题

如何在React上的Styled Component画布上正确使用TypeScript类型

Typescript React Component-执行redux prop类型以停止TS警告的正确方法

类型“ ChildNode”缺少类型“ HTMLOptionElement”中的以下属性

类型'Pagination <UserEntity>'缺少类型'UserEntity'中的以下属性：

类型不匹配？“ ...缺少类型中的以下属性...”

React 组件的 Typescript 属性类型的语法？