javascript - react 语法错误: Inline Babel script: Unterminated JSX contents-6ren

javascript - react 语法错误: Inline Babel script: Unterminated JSX contents

转载作者：太空宇宙更新时间：2023-11-04 15:49:59

25

4

我正在学习react并尝试使用hook。代码的作用是从 Ajax 获取数据，然后显示列表。但是我得到了错误:

SyntaxError: Inline Babel script: Unterminated JSX contents (53:21)
51 | 
52 |   ReactDOM.render(
> 53 |     <MyList/>,
     |         ^
54 |     document.getElementById('example')
55 |   );
56 |      when I load the index.html in browser.

这是index.html中的代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="jquery.js"></script>
    <script src="babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
  class MyList extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        loading: true,
        error: null,
        data: null
      };
    }

    componentDidMount() {
      const url = 'https://api.github.com/search/repositories?q=javascript&sort=stars';
      $.getJSON(url)
       .done(
        (value) => this.setState({
          loading: false,
          data: value
        })
      ).fail(
        (jqXHR, textStatus) => this.setState({
          loading: false,
          error: jqXHR.status
        })
      );
    }

    render() {
      if (this.state.loading) {
        return <span>Loading...</span>;
      } else if (this.state.error !== null) {
        return <span>Error: {this.state.error}</span>;
      } else {
        var projects = this.state.data.items;
        var results=[];
        projects.forEach(p => {
          var item=<li>{p.name}<li>;
          results.push(item);
        });
        return (
          <div>
            <ul>the result list is {results}</ul>
          </div>
        );
      }
    }
  };

  ReactDOM.render(
    <MyList/>,
    document.getElementById('example')
  );
    </script>
  </body>
</html>

如果 Ajex 调用获取数据，请将其保存到 this.state.data，然后尝试迭代它以显示其所有元素。有人可以帮忙吗？

最佳答案

我将其放入 codepen 中，并在第 36 行注意到您没有关闭 <li>标签。我通过关闭 <li> 解决了语法错误。像这样的标签</li> 。查看代码笔:http://codepen.io/justdan/pen/RpOWBz?editors=1010

var item=<li>{p.name}<li>;

尝试更改为

var item=<li>{p.name}</li>;

关于javascript - react 语法错误: Inline Babel script: Unterminated JSX contents，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43217328/

25

4

0

文章推荐： c++ - C++ 中的自定义文件扩展名

文章推荐： c++ - 将 vector* 传递给函数 getnameinfo

文章推荐： html - Plotly 不适用于 HTML 函数

webpack - babel vs babel-core vs babel-loader vs babel-preset-2015 vs babel-preset-react vs babel-polyfill
我正在为我的 React 项目设置 Webpack，并对 babel 感到困惑, babel-core , babel-loader , babel-preset-2015和babel-preset-
javascript - babel-cli vs babel-preset-es2015 vs babel-register vs babel-core？
所有这些 babel 依赖项是什么？它们各自的用途是什么，它们有何不同？我应该为我的 nodejs 网络应用程序使用哪一个？我已经查看了 API 网站，但是否有任何指南可以将这些内容转化为简单的人类
babeljs - babel vs babel-core vs babel-runtime
我的 Node Webpack 项目使用了三个 babel 库。它们之间有什么区别以及如何使用它们？ "dependencies": { "babel-runtime": "^5.8.24" }
webpack - Babel-loader 需要 babel-core 而不是 @babel/core
我用 @babel/core 替换了 babel-core 而 babel-loader 期望 babel-core: { "name": "myproject-ui", "version":
javascript - 与 @babel/env 和 @babel/preset-env 之间的 babel 预设配置混淆
我尝试配置一个环境来使用 babel 和 webpack 开发 javascript。但是我不明白关于presets的babel配置. 在 Usage Guide ，我们可以看到预设为 "@babe
reactjs - Babel 7.5 目标是 babel-preset-es2015 而不是 @babel/preset-env
我已经安装了 babel 7.5，理想情况下它应该以 preset-env 包为目标，但不确定它为什么要寻找“babel-preset-es2015”。你们能告诉我我做错了什么吗？下面是我的代码 p
javascript - 将 `babel-register server.js`更新为 `babel-register`后修改 `@babel/register`
我正在更新a boilerplate中使用的babel包，从 babel-core、babel-register 等到@babel/core、@babel/register > 等问题:在 npm
node.js - Node/巴别塔 : Switching from babel-node or babel-register to babel-cli for production
设置通天塔 6 (^6.0.0), Node 5.4.0，Express 4.13.x， babel-node 和 babel-register 都有警告，禁止在生产环境中使用babel.io 网站
javascript - 将 webpack 与 babel 和 babel-preset-react 以及 babel-preset-es2015 一起使用
我正在尝试转换编译我的 react/es6 代码并且来自 browserify。由于新的 babel 6 版本以及大多数教程现在已经过时的事实，我正在努力创建一个 webpack 构建。这适用于我的
webpack - 为什么我的设置中需要 "@babel/plugin-proposal-optional-chaining"使用 "@babel/preset-env"和 "@babel/preset-typescript"
我有一个使用 Typescript 和 @babel/preset-env 的项目。与 Webpack 捆绑失败并显示此错误和以下配置。如果我取消注释该行，这会强制 @babel/plugin-pr
babeljs - 如何使用装饰器支持配置 babel/babel-standalone？
我在浏览器中使用 babel -> babel-standalone 现在我想使用 ES decorator 语法。但是所有的通天塔doc intro 是服务器端的 babel，比如 ` { "p
javascript - 如何在不安装 babel 本身的情况下直接从脚本标签使用 babel
我正在编写对从 cdnjs.com 引入的所有这些库的 react 。但是，我发现它报告错误:'Uncaught TypeError: Cannot read property 'keys' of u
javascript - babel-node 不被识别为内部或外部命令 - Babel 7
我正在使用 babel v7.6.x 并设置了以下内容。包.json "scripts": { "dev": "nodemon --exec babel-node bin/index.js
javascript - 为什么我需要 @babel/polyfill，使用 Babel？
我正在学习巨大的 JavaScript 生态系统，但我无法理解以下内容。 Babel 是一个编译器，来自官网: Babel is a toolchain that is mainly used to
reactjs - Babel 5 插件正在使用不受支持的 Babel 版本运行
在我使用yarn add -D babel-plugin-react-relay安装relay-query插件后，并在运行开发服务器后，我收到此错误: Error: [BABEL] /Users/ne
javascript - Babel 6 预设选择以使 babel 工作
我使用 babel 6 和 React 插件，并按照文档说明设置转译过程。我已经阅读过要让 React 工作，我需要使用 es2015 和 React preset。最初，使用这两个预设一切都运行良好
babeljs - babel-polyfill 与 babel-plugins
我对 Babel 选项/配置有点迷失。我想使用最新的 js 功能并编译(使用 webpack)为浏览器代码。 babel-polyfill 和有什么区别和 babel plugins与 babel-p
javascript - Babel 没有按预期工作，babel-cli 只是回显输入文件不变
这个问题在这里已经有了答案: Babel file is copied without being transformed (10 个答案) 关闭 6 年前。我只是使用 npm (npm inst
javascript - Npm WARN deprecated babel-preset-es2015@6.24.1 : Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs. io/env 更新
安装时 npm install browserify babelify babel-preset-es2015 我正面临以下警告信息 npm WARN deprecated babel-preset-
standardjs - 找不到模块 'babel-eslint'(本地已经安装了标准和 babel-eslint)
什么版本的标准？ 12.0.1 什么操作系统、Node.js 和 npm 版本？视窗 10，节点 v10.15.1， NPM v.6.8.0 你期望会发生什么？我在 devDependencie

首页

博学

6Ren·AI

商城

javascript - react 语法错误: Inline Babel script: Unterminated JSX contents