Question

我刚刚开始使用Reactjs并且正在编写一个简单的组件来显示
li标记并遇到此错误：

意外的令牌'＆lt;'

我已将示例放在jsbin下面 http://jsbin.com/UWOquRA/1/edit?html,js,console,output

请让我知道我做错了什么。

Answer 1

我使用 type =“text / babel”

解决了这个问题

<script src="js/reactjs/main.js" type = "text/babel"></script>

Answer 2

UPDATE：在React 0.12+中，不再需要JSX编译指示。

确保在文件顶部包含JSX编译指示：

/** @jsx React.DOM */

如果没有此行，jsx二进制文件和浏览器内变换器将保持文件不变。

Answer 3

问题意外令牌＆＃39;＆lt;＆＃39; 是因为错过了babel预设。

解决方案：您必须按如下方式配置您的webpack配置

          {
            test   :/\.jsx?$/,
            exclude:/(node_modules|bower_components)/,
            loader :'babel',
            query  :{
                presets:['react','es2015']
            }
        }

这里.jsx检查.js和.jsx格式。

您只需使用节点安装babel依赖项，如下所示

npm install babel-preset-react

谢谢

Answer 4

在我的情况下，我没有在我的脚本标记中包含type属性。

<script type="text/jsx">

Answer 5

您需要将JSX代码转换/编译为javascript或使用浏览器内的转换器

查看http://facebook.github.io/react/docs/getting-started.html并注意<script>标记，您需要将JSX中包含的标记用于浏览器。

Answer 6

我有这个错误，并且两天都无法解决这个问题。所以修复错误非常简单。在正文中，您连接script，添加type="text/jsx"，这将解决问题。

Answer 7

以下是jsbin的一个工作示例：

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="main-content"></div>
</body>
</html>

JSX：

<script type="text/jsx">
/** @jsx React.DOM */
var LikeOrNot = React.createClass({
    render: function () {
      return (
        <p>Like</p>
      );
    }
});

React.renderComponent(<LikeOrNot />, document.getElementById('main-content'));
</script>

从单个文件运行此代码，它应该可以正常工作。

Answer 8

对于正确的标记解析，您需要使用此babel版本：https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js和属性＆＃34; type =＆＃39; text / babel＆＃39;＆＃34;在脚本中。此外，您的自定义脚本应该在＆＃34; body＆＃34;标签。

Answer 9

使用以下代码。我添加了对React和React DOM的引用。使用ES6 / Babel将JS代码转换为vanilla JavaScript。请注意，Render方法来自ReactDOM，并确保render方法具有在DOM中指定的目标。有时您可能会遇到render（）方法无法找到目标元素的问题。发生这种情况是因为反应代码在DOM呈现之前执行。为了解决这个问题，使用jQuery ready（）来调用React的render（）方法。这样您就可以确定首先渲染DOM了。您还可以在应用脚本上使用延迟属性。

HTML code：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id='main-content'></div>
<script src="CDN link to/react-15.1.0.js"></script>
<script src="CDN link to/react-dom-15.1.0.js"></script>

</body>
</html>

JS代码：

var LikeOrNot = React.createClass({
    render: function () {
      return (
        <li>Like</li>
      );
    }
});

ReactDOM.render(<LikeOrNot />,
                document.getElementById('main-content'));

希望这能解决您的问题。： - ）

Answer 10

如果您喜欢我并且容易出现愚蠢的错误，请检查您的package.json是否包含您的babel预设：

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },

Answer 11

检查.babelrc是否在应用程序根文件夹中，而不在子文件夹中。如果是这种情况，将文件移至根目录。

Answer 12

您可以使用以下代码：

import React from 'react';
import ReactDOM from 'react-dom';

var LikeOrNot = React.createClass({
    displayName: 'Like',
    render: function () {
      return (
        React.createElement("li", null, "Like")
      );
    }
});
ReactDOM.render(<LikeOrNot />, document.getElementById('main-content'));

不要忘记在<div id='main-content'></div>

的body中添加html

但是在你的package.json文件中你应该使用这个依赖项：

  "dependencies": {
...
    "babel-core": "^6.18.2",
    "babel-preset-react": "^6.16.0",
...
}
"devDependencies": {
...   
    "babel": "^6.5.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "jsx-loader": "^0.13.2",
...
}

这对我有用，但我也使用了webpack，有了这个选项（进入webpack.config.js）：

  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  }

Answer 13

在我的情况下，除babel预设外，我还必须将其添加到我的.eslintrc：

{
  "extends": "react-app",
  ...
}

Answer 14

我今天才刚刚开始学习React，并且遇到了同样的问题。下面是我编写的代码。

<script type="text/babel">
    class Hello extends React.Component {
        render(){
            return (
                <div>
                    <h1>Hello World</h1>
                </div>
            )
        }
    }
    ReactDOM.render(
        <Hello/>
        document.getElementById('react-container')
    )


</script>

并且您可以看到在使用<Hello/>之后我错过了逗号（，）。错误本身就是在说我们需要看哪条线。

因此，一旦我在ReactDOM.render()函数的第二个参数之前添加了逗号，一切都开始正常工作。

Answer 15

这是您可以做到的另一种方法 html

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
     <div id="app"></div>

    <script src="src/index.js"></script>
</body>

</html>

具有路径src / index.js的index.js文件

import React from "react";
import { render } from "react-dom";

import "./styles.scss";

const App = () => (
  <div>
    <h1>Hello test</h1>
  </div>
);

render(<App />, document.getElementById("app"));

使用此package.json将使您快速启动并运行

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-native": "0.57.5"
  },
  "devDependencies": {
    "@types/react-native": "0.57.13",
    "parcel-bundler": "^1.6.1"
  },
  "keywords": []
}

Answer 16

尽管如此，我的.babelrc配置文件中包含所有正确的babel加载程序。手动刷新页面时，此具有包裹捆绑程序的构建脚本在浏览器控制台中为我生成了意外的令牌错误<和mime类型错误。

public ResponseEntity<Object> addCustomerEvent(@RequestBody Object customerEvent) {
  log.info("~REST request to create new event " + customerEvent.toString());
  CustomerEvent e = (CustomerEvent) customerEvent; // <<---- FAILS cannot cast LinkedHashMap to CustomerEvent
}

更新构建脚本为我解决了这些问题。

RewriteEngine On
RewriteBase /

RewriteCond %{THE_REQUEST} ^GET.*index\.php [NC]
RewriteRule (.*?)index\.php/*(.*) /$1$2 [R=301,NE,L]

RewriteCond %{THE_REQUEST} ^GET.*index [NC]
RewriteRule (.*?)index\.php/*(.*) /$1$2 [R=301,NE,L]

RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /([^\ ]+)\.php
RewriteRule ^/?(.*)\.php$ /$1 [L,R=301]

Reactjs：意外的令牌'＆lt;'错误

16 个答案: