Reactjs：意外的令牌'<'错误-Java 学习之路

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

意外的标记'<'

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

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

15 回答

0
问题 Unexpected token '<' 是因为错过了babel预设 .

解决方案：您必须按如下方式配置webpack配置
```
{
            test   :/\.jsx?$/,
            exclude:/(node_modules|bower_components)/,
            loader :'babel',
            query  :{
                presets:['react','es2015']
            }
        }
```
这里.jsx检查.js和.jsx格式 .

您可以使用节点简单地安装babel依赖项，如下所示
```
npm install babel-preset-react
```
谢谢
回复于 2024-05-06T04:22:12+08:00

以下是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>

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

回复于 2024-05-06T04:22:12+08:00

1
我用 type = "text/babel" 解决了它
```
<script src="js/reactjs/main.js" type = "text/babel"></script>
```
回复于 2024-05-06T04:22:12+08:00
0
在我的情况下，除了 babel 预设，我还必须将其添加到我的 .eslintrc ：
```
{
  "extends": "react-app",
  ...
}
```
回复于 2024-05-06T04:22:12+08:00
17
使用以下代码 . 我添加了对React和React DOM的引用 . 使用ES6 / Babel将JS代码转换为vanilla JavaScript . 请注意，Render方法来自ReactDOM，并确保render方法具有在DOM中指定的目标 . 有时您可能会遇到render（）方法无法找到目标元素的问题 . 发生这种情况是因为反应代码在DOM渲染之前执行 . 为了解决这个问题，使用jQuery ready（）来调用React的render（）方法 . 这样您就可以确定首先渲染DOM了 . 您还可以在应用脚本上使用延迟属性 .

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>
```
JS代码：
```
var LikeOrNot = React.createClass({
    render: function () {
      return (
        <li>Like</li>
      );
    }
});

ReactDOM.render(<LikeOrNot />,
                document.getElementById('main-content'));
```
希望这能解决您的问题 . :-)
回复于 2024-05-06T04:22:12+08:00
1

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

回复于 2024-05-06T04:22:12+08:00

你可以使用这样的代码：

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']
        }
      }
    ]
  }

回复于 2024-05-06T04:22:12+08:00

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

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

并将属性添加到您的js文件中 - 类型=“text / babel”

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

那么下面的代码示例将起作用：

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

回复于 2024-05-06T04:22:12+08:00

继承人另一种方式你可以做到html

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

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

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

</html>

index.js文件，路径为src / 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": []
}

回复于 2024-05-06T04:22:12+08:00

1
UPDATE: 在React 0.12中，不再需要JSX编译指示 .

确保在文件顶部包含JSX编译指示：
```
/** @jsx React.DOM */
```
如果没有这一行， jsx 二进制和浏览器内变换器将保持文件不变 .
回复于 2024-05-06T04:22:12+08:00
29
在我的情况下，我没有在我的脚本标签上包含type属性 .
```
<script type="text/jsx">
```
回复于 2024-05-06T04:22:12+08:00
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/> 之后错过了一个逗号（，） . 而错误本身就是说我们需要看哪一行 .

所以一旦我在 ReactDOM.render() 函数的第二个参数之前添加一个逗号，所有都开始正常工作 .
回复于 2024-05-06T04:22:12+08:00
0

要正确标记解析，您需要在脚本中使用此babel版本：https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js和属性"type='text/babel'" . 此外，您的自定义脚本应在"body"标记内 .

回复于 2024-05-06T04:22:12+08:00
0
如果你像我一样并且容易出现愚蠢的错误，那么检查你的package.json是否包含你的babel预设：
```
"babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
```
回复于 2024-05-06T04:22:12+08:00
7

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

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

回复于 2024-05-06T04:22:12+08:00

Reactjs：意外的令牌'<'错误

15 回答

相关问题