Reactjs: 意外令牌“ <’错误

我刚刚开始使用 Reactjs，正在编写一个简单的组件来显示
li标记并发现了这个错误:

意外令牌’<’

我把这个例子放在下面的 jsbin Http://jsbin.com/uwoqura/1/edit?html,js,console,output

Please let me know what i am doing wrong.

184221 次浏览
小开

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

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

小开

更新: 在 React 0.12 + 中，不再需要 JSX 杂注。

Make sure include the JSX pragma at the top of your files:

/** @jsx React.DOM */

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

小开

下面是来自 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>

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

小开

在我的例子中，我没有在 script 标记中包含 type 属性。

<script type="text/jsx">
小开

我用 Type = “ text/babel”解出来的

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

问题 意外令牌’<’是因为缺少巴别塔预设。

解决方案: 您必须按照以下方式配置您的 webpack 配置

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

here .jsx checks both .js and .jsx formats.

您可以简单地使用节点安装 babel 依赖项，如下所示

npm install babel-preset-react

谢谢你

小开

为了进行正确的标记解析，您需要在脚本中使用这个 babel 版本: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js和属性“ type = ‘ text/babel’”。此外，您的自定义脚本应该位于“ body”标记中。

小开

您可以这样使用代码:

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>加入到 html的 body中

但是在 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']
}
}
]
}
小开

在我的情况下，除了 babel预设，我还必须添加到我的 .eslintrc:

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

如果我们考虑您的实际站点配置，那么您需要在头部运行 ReactJS

<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

and add attribute to your js file - type="text/babel" like

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

then the below code example will work:

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
小开

使用以下代码。我已经增加了对 React 和 React DOM 的参考。使用 ES6/Babel 将 JS 代码转换成普通的 JavaScript。注意，Render 方法来自 ReactDOM，并确保 Render 方法具有在 DOM 中指定的目标。 有时您可能会遇到一个 render ()方法无法找到目标元素的问题。这是因为反应代码在 DOM 呈现之前执行。为了解决这个问题，可以使用 jQuery ready ()调用 React 的 render ()方法。通过这种方式，您可以确保首先呈现 DOM。您还可以在应用程序脚本中使用 Defer 属性。

HTML 代码:

<!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>

代码:

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


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

希望这能解决你的问题。 : -)

小开

I have this error and could not solve this for two days.So the fix of error is very simple. 在主体中，连接 script，添加 type="text/jsx"，这将解决问题。

小开

如果你像我一样容易犯傻，也可以检查一下 package.json，看看它是否包含了你的 babel 预设:

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

我今天刚开始学习 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/>之后漏掉了一个逗号(,)。错误本身就说明了我们需要看哪一行。

enter image description here

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

小开

这是另一种你可以做到的方法 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"));

use this package.json will get u up and running quickly

{
"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": []
}
小开

不过，我有所有合适的巴贝尔装载机在我的。Babelrc 配置文件。这个 使用包裹捆绑器编写脚本在手动刷新页面时为我在浏览器控制台中产生了意外的令牌错误 < 和 mime 类型错误。

"scripts": {
"build": "parcel build ui/index.html --public-url ./",
"dev": "parcel watch ui/index.html"
}

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

"scripts": {
"build": "parcel build ui/index.html",
"ui": "parcel watch ui/index.html"
}
小开

检查一下。Babelrc 在应用程序根文件夹中，而不在子文件夹中。如果是这样的话，把文件移到根目录。

小开

也许这个能帮上忙，我在制片时就是这样的。 In your package.json file 加入 网页: 你的网页地址 就像下面的代码一样

"name": "client",
"version": "0.1.0",
"homepage": "abc.org",
"private": true,

提交答案