TSLINT 错误:“typeof React”类型上不存在属性“组件”
Posted
技术标签:
【中文标题】TSLINT 错误:“typeof React”类型上不存在属性“组件”【英文标题】:TSLINT Error: Property 'Component' does not exist on type 'typeof React' 【发布时间】:2019-09-14 17:16:04 【问题描述】:我下载了 [react-native-redux-typescript-boilerplate]: https://reactnativeseed.com/ 。该项目在 android 模拟器中运行顺利。但是,存在大量 tslint 错误,尤其是在 JSX 语法中(即 .tsx 文件)。一个主要是https://reactnativeseed.com/
我使用 webstrom 作为我的代码编辑器,我交叉检查了 webstrom 和项目使用的 typescript 版本。有相同的。
这些是版本: 1.打字稿 - 2.6.2 2. 反应原生 - 0.59.6 3. 反应 - 16.2.0 4. react-redux - 5.0.6 5.@types/react - "^16.8.14" 6. @types/react-native - "^0.47.7"
我还有什么需要检查的吗?
我也安装了 ["tslint-fix": "^0.1.3"]: https://www.npmjs.com/package/tslint-fix
例如:index.tsx
import * as React from "react";
import Item, Input, Icon, Form, Toast from "native-base";
import Field, reduxForm from "redux-form";
import Login from "../../stories/screens/Login";
const required = value => (value ? undefined : "Required");
const maxLength = max => value => (value && value.length > max ? `Must be $max characters or less` : undefined);
const maxLength15 = maxLength(15);
const minLength = min => value => (value && value.length < min ? `Must be $min characters or more` : undefined);
const minLength8 = minLength(8);
const email = value =>
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]2,4$/i.test(value) ? "Invalid email address" : undefined;
const alphaNumeric = value => (value && /[^a-zA-Z0-9 ]/i.test(value) ? "Only alphanumeric characters" : undefined);
export interface Props
navigation: any;
valid: boolean;
export interface State
class LoginForm extends React.Component<Props, State>
textInput: any;
renderInput( input, meta: touched, error )
return (
<Item error=error && touched>
<Icon active name=input.name === "email" ? "person" : "unlock" />
<Input
ref=c => (this.textInput = c)
placeholder=input.name === "email" ? "Email" : "Password"
secureTextEntry=input.name === "password" ? true : false
...input
/>
</Item>
);
login()
if (this.props.valid)
this.props.navigation.navigate("Drawer");
else
Toast.show(
text: "Enter Valid Username & password!",
duration: 2000,
position: "top",
textStyle: textAlign: "center" ,
);
render()
const form = (
<Form>
<Field name="email" component=this.renderInput validate=[email, required] />
<Field
name="password"
component=this.renderInput
validate=[alphaNumeric, minLength8, maxLength15, required]
/>
</Form>
);
return <Login loginForm=form onLogin=() => this.login() />;
const LoginContainer = reduxForm(
form: "login",
)(LoginForm);
export default LoginContainer;
在上面的文件中的 render() 中显示了很多错误。 其中一些是: 1. 类型“typeof React”上不存在属性“组件”。 2. JSX 元素类型 'Item' 不是 JSX 元素的构造函数。 “项目”类型中缺少属性“渲染”。 还有更多类似的。
【问题讨论】:
【参考方案1】:我终于解决了这个问题。 @type/react 使用的是 typescript 2.8.1 版,而我的项目使用的是 typescript 2.6.2 版。因此,我将项目的 typescript 版本升级到 2.8.1,并且错误消失了。
【讨论】:
感谢您的回答。它也帮助我解决了我的问题。 您如何确定typescript
和@types/react
的哪些版本相互兼容?【参考方案2】:
你忘记导入 React
import React, Component from 'react';
将class LoginForm extends React.Component<Props, State>
替换为class LoginForm extends Component<Props, State>
【讨论】:
非常感谢您的快速回复。在我的文件中,我已将 React 导入为import * as React from "react";
,但在粘贴代码时不知何故错过了该行。我为这个错误道歉。但是,是的,导入语句不是问题。以上是关于TSLINT 错误:“typeof React”类型上不存在属性“组件”的主要内容,如果未能解决你的问题,请参考以下文章