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

Posted 2023-03-10

【中文标题】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。我无法确定可能导致此错误的更改。

【参考方案1】：

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

【参考方案2】：

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

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

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