![](/img/trans.png)
[英]`Property 'ethereum' does not exist on type 'Window & typeof globalThis'` error in React
[英]TSLINT Error: Property 'Component' does not exist on type 'typeof React'
我下載了 [react-native-redux-typescript-boilerplate]: https ://reactnativeseed.com/。 該項目在android模擬器中運行流暢。 但是,存在大量 tslint 錯誤,尤其是在 JSX 語法(即 .tsx 文件)中。 一個主要的是https://reactnativeseed.com/
我使用 webstrom 作為我的代碼編輯器,我交叉檢查了 webstrom 和項目使用的打字稿版本。 有一樣的。
這些是版本: 1. Typescript - 2.6.2 2. react-native - 0.59.6 3. react - 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”上不存在屬性“Component”。 2. JSX 元素類型“Item”不是 JSX 元素的構造函數。 類型“Item”中缺少屬性“render”。 還有更多類似的。
我終於解決了這個問題。 @types/react 使用的是 typescript 版本 2.8.1,而我的項目使用的是 typescript 版本 2.6.2。 因此,我將項目的打字稿版本升級到 2.8.1,錯誤消失了。
你忘了導入 React
import React, { Component } from 'react';
將class LoginForm extends React.Component<Props, State>
替換為class LoginForm extends Component<Props, State>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.