[英]React Native TypeSrcript Function Returning JSX.Element Type
I've got a TypeScript function which returns a React Native View
.我有一个 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;
And I'm calling this function in this way:我以这种方式调用这个函数:
import JSX from "react-native";
import DummyClass from "./util/dummy";
const DummyWrapper = () => {
return (DummyClass.getView());
};
export default DummyWrapper;
And when I run eslint
, I get a warning.当我运行
eslint
,我收到警告。
5:5 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
5:5 警告缺少函数 @typescript-eslint/explicit-module-boundary-types 的返回类型
So, I need to be returning something.所以,我需要返回一些东西。
JSX.Element
seems reasonable enough, but that doesn't seem to be working. JSX.Element
似乎足够合理,但这似乎不起作用。 For one, when I try to return a JSX.Element
, VSCode can't resolve it and pretends it's any
instead.一方面,当我尝试返回
JSX.Element
,VSCode 无法解析它并假装它是any
。 And moreover, it causes errors in other places that call the function.而且,它会在调用该函数的其他地方导致错误。
So, doing this: static getView() : JSX.Element {
and const DummyWrapper = () : JSX.Element => {
所以,这样做:
static getView() : JSX.Element {
和const DummyWrapper = () : JSX.Element => {
Results in the following error in DummyCaller
:在
DummyCaller
中导致以下错误:
5:5 error Unsafe return of an any typed value @typescript-eslint/no-unsafe-return
5:5 错误任何类型值的不安全返回@typescript-eslint/no-unsafe-return
So now I'm not sure exactly what to do.所以现在我不确定该怎么做。 I've tried a few other things, such as returning
View
, typeof View
, React.Component
(and typeof
), and a few other things.我尝试了一些其他的东西,比如返回
View
、 typeof View
、 React.Component
(和typeof
),以及其他一些东西。 I've also messed around with where JSX is being imported from.我还弄乱了从哪里导入 JSX。 If I import from
react
, it seems to work even worse than if I import it from react-native
.如果我从
react
导入,它似乎比从react-native
导入更糟糕。 Also in my research, I see the most common problem is that one's React and React Native types are out of date, but as far as I can tell, I'm on the most up-to-date versions.同样在我的研究中,我看到最常见的问题是 React 和 React Native 类型已经过时,但据我所知,我使用的是最新版本。
My packages.json
:我的
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
}
React should be putting JSX
into the global namespace, so if you don't import it from anywhere then returning JSX.Element
should work. React 应该将
JSX
放入全局命名空间,所以如果你不从任何地方导入它,那么返回JSX.Element
应该可以工作。
You can also import {ReactElement} from "react"
and return ReactElement
.您还可以
import {ReactElement} from "react"
并返回ReactElement
。
You can also import {FunctionComponent} from "react"
and type the DummyWrapper
function itself, not the return type, as DummyWrapper: FunctionComponent<{}>
.您还可以
import {FunctionComponent} from "react"
并键入DummyWrapper
函数本身,而不是返回类型,如DummyWrapper: FunctionComponent<{}>
。
There's a lot of options.有很多选择。
But I really do not understand the use case where you would be creating an element from a static
method on a class.但我真的不明白您将从类上的
static
方法创建元素的用例。 This seems like a bad design that you should rethink.这似乎是一个糟糕的设计,您应该重新考虑。 Can you make
getView
into a function component?能不能把
getView
做成函数组件? Do you need the class DummyClass
at all?你真的需要
DummyClass
类吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.