React报错之组件不能作为JSX组件使用

码界逸云
• 阅读 3554

总览

组件不能作为JSX组件使用,出现该错误有多个原因:

  1. 返回JSX元素数组,而不是单个元素。
  2. 从组件中返回JSX元素或者null以外的任何值。
  3. 使用过时的React类型声明。

返回单个JSX元素

下面是一个错误如何发生的示例。

// App.tsx

// ⛔️ 'App' cannot be used as a JSX component.
// Its return type 'Element[]' is not a valid JSX element.
// Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key
const App = () => {
  return ['a', 'b', 'c'].map(element => {
    return <h2 key={element}>{element}</h2>;
  });
};

export default App;

代码示例中的问题是,我们返回的是一个JSX元素数组,而不是单个JSX元素。

为了解决这种情况下的错误,我们必须使用React fragment 或者div元素来包裹数组。

// App.tsx

const App = () => {
  return (
    <>
      {['a', 'b', 'c'].map(element => {
        return <h2 key={element}>{element}</h2>;
      })}
    </>
  );
};

export default App;

现在我们的组件返回了单个JSX元素,这样错误就解决了。

当我们需要对子节点列表进行分组而不需要向DOM中添加额外的节点时,就会使用Fragments。

您可能还会看到使用了更加详细的fragments语法。

// App.tsx

import React from 'react';

const App = () => {
  return (
    <React.Fragment>
      {['a', 'b', 'c'].map(element => {
        return <h2 key={element}>{element}</h2>;
      })}
    </React.Fragment>
  );
};

export default App;

你也可以使用div元素来充当包裹器,从组件中返回单个JSX元素。

不要忘记返回值

另一个常见原因是,我们从组件中返回JSX元素或者null以外的任意值,或者忘记返回值。

// ⛔️ 'App' cannot be used as a JSX component.
// Its return type 'undefined' is not a valid JSX element.
const App = () => {
  // 👇️ this returns undefined
  return
  <h2>hello world</h2>
};

export default App;

上述代码示例返回undefined,因为我们把返回语句放在一行,而把JSX代码放在下一行,并且没有使用括号。

我们不允许从组件中返回undefined,因此会出现这个错误。

为了解决该错误,我们必须确保返回的代码是可达的。

const App = () => {
  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
};

export default App;

如果你确信从React组件中,返回了单个JSX元素或者null 。但是错误依旧存在,试着更新React类型声明。

更新React类型声明

在项目的根目录下打开终端,运行以下命令:

# 👇️ with NPM
npm install --save-dev @types/react@latest @types/react-dom@latest

# 👇️ if you also want to update react and react-dom
npm install react@latest react-dom@latest

# ------------------------------

# 👇️ with YARN
yarn add @types/react@latest @types/react-dom@latest --dev

# 👇️ if you also want to update react and react-dom
yarn add react@latest react-dom@latest

该命令将会更新你的react类型声明版本。

确保重启开发服务器,如有必要请重启IDE。开发服务器不会接收这些更改,直到你停止它并重新运行npm start命令。

如果错误还没有被解决,尝试删除node_modulespackage-lock.json(不是package.json)文件,重新运行npm install,重启IDE。

# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

npm install

如果错误依旧存在,请确保重启了IDE和开发服务器。VSCode经常出现故障,有时重启就能解决问题。

点赞
收藏
评论区
推荐文章
冴羽 冴羽
2年前
React 之 createElement 源码解读
React与Babel元素标签转译用过React的同学都知道,当我们这样写时:jsx<divid"foo"bar</divBabel会将其转译为:javascriptReact.crea
Stella981 Stella981
3年前
React 基础入门指南教程
JSX在Twitter(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Ftwitter.com%2Fchris_noring)上关注我,很高兴接受您对主题或改进的建议/克里斯本章涵盖以下主题:什么是JSX:JSX是你在React中一直
Stella981 Stella981
3年前
React的Element的创建和render
React的Element是React应用程序的最小构建块,它是用来描述我们在屏幕上看到的浏览器页面上的内容。在React中构建Element 有两种方式:1、JSX的方式,JSX不是React的必用技术,但它可以用来产生一个React“element”.constelement(<h1className"
可莉 可莉
3年前
06. react 初次见面
    React元素的事件处理和DOM元素的很相似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法,而不是小写。如果采用JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)    例如,传统的HTML:<buttononclick"activateLas
Stella981 Stella981
3年前
React 入门及学习笔记
React构建用户界面的JavaScript库,主要用于构建UI界面。Instagram,2013年开源。特点:1.声明式的设计2.高效,采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作。3.灵活,跟其他库灵活搭配使用。4.JSX,俗称JS里面写HTML,JavaScript语法的扩展。5.组件化,模
Stella981 Stella981
3年前
React应用渲染界面的入口
jsx代码:varReactrequire('react');varReactDOMrequire('reactdom');varMyButtonControllerrequire('./components/MyButtonController');ReactDOM.render
Stella981 Stella981
3年前
2020前端面试系列之JSX是什么
前言众所周知ReactNative开发中,页面View书写布局采用了React的JSX语法,而在ReactNative面试中可能会遇到有关JSX相关的面试题,今天和大家分享有关JSX的知识,为你的面试助一臂之力。JSX的定义JSX到底是什么?我们先看看\React官网\(https://reactjs.org/docs/g
Wesley13 Wesley13
3年前
02. react 初次见面
1、JSX简介我们来观察一下声明的这个变量:constelement<h1Hello,world!</h1;这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML.它被称为JSX,一种JavaScript的语法扩展。我们推荐在React中使用JSX来描述用户界面。JSX乍
Stella981 Stella981
3年前
React 第一个小游戏(井字棋)知识关键点
1、React是一个声明式,高效且灵活的用于构建用户界面的JavaScript库通过使用组件来告诉React我们希望在屏幕上看到什么。当数据发生变化时,React会高效的更新并重新渲染我们的组件2、render返回了一个React元素,这是一种对渲染内容的轻量级描述。大多数的React开发者使用了一种名为"JSX"的特
可莉 可莉
3年前
2020前端面试系列之JSX是什么
前言众所周知ReactNative开发中,页面View书写布局采用了React的JSX语法,而在ReactNative面试中可能会遇到有关JSX相关的面试题,今天和大家分享有关JSX的知识,为你的面试助一臂之力。JSX的定义JSX到底是什么?我们先看看\React官网\(https://reactjs.org/docs/g
可莉 可莉
3年前
04. react 初次见面
    组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。1、组件定义的两种方式1.1函数定义组件  定义一个组件最简单的方式是使用JavaScript函数:functionWelcome(props){return<