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

【问题标题】：JSX element type 'ReactElement<any> | null' is not a constructor function for JSX elementsJSX 元素类型 'ReactElement<any> | null' 不是 JSX 元素的构造函数
【发布时间】：2019-05-18 06:32:32
【问题描述】：

我通过以下方式设置了简单的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 /> 时，我都会收到来自 typescript 的以下错误：

JSX 元素类型'ReactElement | null' 不是构造函数 JSX 元素的函数。类型“ReactElement”不是可分配给类型 'Element'.ts(2605)

这发生在我的很多元素上，并且开始发生，因为我更新了最新的类型，用于从确定类型的 react 和 react-native。我无法确定可能导致此错误的更改。

【问题讨论】：

标签： reactjs typescript react-native

【解决方案1】：

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

【讨论】：

【解决方案2】：

小提示：当它发生时，当你明确提供组件返回类型时，更容易看出错误来自哪里（这里：React.FC）：

const Paragraph: React.FC = ({ children }) => (
  <Text>
    {children}
  </Text>
);

如果错误说明<Text /> 组件未返回ReactElement<any> | null，您就知道该组件是罪魁祸首。如果不是，很可能是因为类型不同步，就像@ramirozap 建议的那样。

【讨论】：