Question

我通过以下方式设置了简单的Paragraph组件

import * as React from 'react';
import {Text} from 'react-native';

const { memo } = React;

/**
 * Component
 */
function Paragraph({ children }) {
  return (
    <Text>
      {children}
    </Text>
  );
}

export default memo(Paragraph);

每当我在应用程序中使用<Paragraph />时，我都会收到来自打字稿的以下错误消息：

JSX元素类型'ReactElement | null'不是构造函数 JSX元素的功能。类型“ ReactElement”不是可分配为类型'Element'.ts（2605）

自从我将最新的类型更新为“ react”和“ react-native”类型以来，我的许多元素都开始发生这种情况，并且开始发生。我无法查明可能导致此错误的更改。

Answer 1

这是由于自动生成的文件中键入库的版本不同而引起的，可能是由于更新库而搞砸了，删除了node_modules和yarn.lock或package-lock.json然后重新安装。

Answer 2

提示：发生这种情况时，当您显式提供组件返回类型（此处为SnackBar）时，更容易看出错误的出处：

collection.watch(asList(Aggregates.match(Filters.in("operationType", asList("insert", "update"))))).forEach(printBlock);

如果该错误说明React.FC组件未返回const Paragraph: React.FC = ({ children }) => ( <Text> {children} </Text> );，则说明该组件是罪魁祸首。如果不是这样，很可能像@ramirozap建议的那样类型不同步。

JSX元素类型'ReactElement <any> | null'不是JSX元素的构造函数

2 个答案: