reactjs - TSLINT 错误：类型 'typeof React' 上不存在属性 'Component'

我下载了 react-native-redux-typescript-boilerplate。该项目在安卓模拟器上运行顺利。然而，有很多 tslint 错误，尤其是在 JSX 语法（即 .tsx 文件）中。一个主要的问题是 https://reactnativeseed.com/

我使用 WebStorm 作为我的代码编辑器，并且我交叉检查了 WebStorm 使用的 TypeScript 版本和项目的版本。它们是相同的。

这些版本是：

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"

例如：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'。还有许多类似的情况。

答案＃1

我终于解决了这个问题。@types/react 使用的是 TypeScript 版本 2.8.1，而我的项目使用的是 TypeScript 版本 2.6.2。所以，我将项目的 TypeScript 版本升级到 2.8.1，错误就消失了。

答案＃2

你忘记导入 React

import React, { Component } from 'react';

将 class LoginForm extends React.Component<Props, State> 替换为 class LoginForm extends Component<Props, State>