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

更新日期: 2022-07-30阅读: 990标签: jsx

总览

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

null

返回单个JSX元素

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

// App.tsx

// :no_entry:️ '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 以外的任意值,或者忘记返回值。

// :no_entry:️ 'App' cannot be used as a JSX component.
// Its return type 'undefined' is not a valid JSX element.
const App = () => {
  // :point_down:️ 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类型声明

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

# :point_down:️ with npm
npm install --save-dev @types/react@latest @types/react-dom@latest

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

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

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

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

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

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

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

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

# :point_down:️ clean npm cache
npm cache clean --force

npm install

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

来自:https://www.cnblogs.com/chuckQu/p/16530551.html

链接: https://fly63.com/article/detial/11962

vue2.0写组件使用jsx语法_webpack在vue项目中支持jsx

Vue 2.0中的render中使用JSX,由于Vue框架并没有特意地去支持JSX,Vue和JSX为什么能配合在一起使用呢? 很简单, 因为Vue支持虚拟DOM, 你可以用JSX或者其他预处理语言,只要能保证render方法正常工作即可。

jsx是什么?_JSX语法简介

JSX就是Javascript和XML结合的一种格式,利用HTML语法来创建虚拟DOM。将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯JS再由浏览器执行。

JSX 这么6?

本文会先解释一下JSX的工作原理,再介绍一下如何用不寻常的方式来使用JSX。

如何在iview组件中使用jsx

最近选用的框架iview表单组件的render写法让人有点不习惯,尤其是在写比较复杂的逻辑的时候,还是感觉模 板式的写法比较方便且可读性较强。而render函数除了支持配置写法外,还支持jsx的写法。由于之前有用过react,因此对jsx并不陌生,可以直接上手。

react本质:JSX如何转化为javascript

react中基本都使用JSX来开发,但JSX其实是javascript的一种语法糖。语法糖就是提供了一种全新的方式书写代码,但是其实现原理与之前的写法相同。

React和JSX基础

脚手架工具:选用React官方推荐的脚手架工具create-react-app,安装npm install create-react-app -g。项目初始化步骤:

可替代的JSX

不仅仅是在React(或受JSX启发模板),对于在各种框架中进行模板化,JSX是如今一个非常受欢迎的选择。然而,如果你不喜欢使用JSX,或者你的项目想避免使用它,又或者只是受好奇心驱使

Vue中jsx的最简单用法

JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析.

JSX在render函数中的应用

JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

React中JSX和虚拟dom

这被称为 JSX,是一个 JavaScript 的语法扩展。建议在 React 中配合使用 JSX,JSX 可以生成 React “元素”,而且JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!