React Native TypeScript 函数返回 JSX.Element 类型

Question

我有一个 TypeScript 函数，它返回一个 React Native View。

import React from "react";
import JSX, {View} from "react-native";

class DummyClass {
    static getView() {
        return (
            <View style={{flex: 1}}/>
        );
    }
}

export default DummyClass;

我以这种方式调用这个函数：

import JSX from "react-native";
import DummyClass from "./util/dummy";

const DummyWrapper = () => {
    return (DummyClass.getView());
};

export default DummyWrapper;

当我跑步时eslint，我收到警告。

5:5 警告 函数 @typescript-eslint/explicit-module-boundary-types 缺少返回类型

所以，我需要归还一些东西。JSX.Element看起来很合理，但这似乎不起作用。其一，当我尝试返回 a 时JSX.Element，VSCode 无法解析它并假装它是any。而且，它会导致调用该函数的其他地方出现错误。

所以，这样做： static getView() : JSX.Element { 和const DummyWrapper = () : JSX.Element => {

导致以下错误DummyCaller：

5:5 错误 任何类型值的不安全返回 @typescript-eslint/no-unsafe-return

所以现在我不确定到底该怎么做。我尝试了其他一些事情，例如返回View、typeof View、React.Component（和typeof）以及其他一些事情。我还弄乱了 JSX 的导入位置。如果我从 导入react，它的效果似乎比从 导入更糟糕react-native。另外，在我的研究中，我发现最常见的问题是 React 和 React Native 类型已经过时，但据我所知，我使用的是最新版本。

我的packages.json：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint -c .eslintrc.js --ext .tsx ."
  },
  "dependencies": {
    "@dudigital/react-native-zoomable-view": "^1.0.15",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.7.6",
    "@react-navigation/stack": "^5.9.3",
    "@types/react-native-vector-icons": "^6.4.6",
    "change-case": "^4.1.1",
    "expo": "~39.0.2",
    "expo-status-bar": "~1.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-paper": "^4.2.0",
    "react-native-reanimated": "^1.13.1",
    "react-native-safe-area-context": "^3.1.8",
    "react-native-screens": "^2.11.0",
    "react-native-tab-view": "^2.15.2",
    "react-native-vector-icons": "^7.1.0",
    "react-native-web": "^0.13.18"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/jest": "^26.0.15",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "@types/react-native": "^0.63.27",
    "@types/react-navigation": "^3.4.0",
    "@types/react-redux": "^7.1.9",
    "@types/react-test-renderer": "^16.9.3",
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "commonjs": "latest",
    "eslint": "^7.11.0",
    "eslint-plugin-jsdoc": "^30.7.3",
    "eslint-plugin-prefer-arrow": "^1.2.2",
    "eslint-plugin-react": "^7.21.5",
    "react-native-typescript-transformer": "^1.2.13",
    "requirejs": "latest",
    "ts-jest": "^26.4.1",
    "tslib": "^2.0.3",
    "typescript": "^4.0.3"
  },
  "private": true
}

Answer 1

React 应该放入JSX全局命名空间中，因此如果您不从任何地方导入它，那么返回JSX.Element应该可以工作。

您还可以import {ReactElement} from "react"并返回ReactElement。

您还可以import {FunctionComponent} from "react"键入DummyWrapper函数本身，而不是返回类型，如DummyWrapper: FunctionComponent<{}>。

有很多选择。

static但我真的不明白从类上的方法创建元素的用例。这似乎是一个糟糕的设计，您应该重新考虑。可以做成getView功能组件吗？DummyClass你到底需要上课吗？