tôi mới bắt đầu với Reactjs và đang viết một thành phần đơn giản để hiển thị
lithẻ và gặp lỗi này:
Mã thông báo không mong đợi '<'
Tôi đã đặt ví dụ tại jsbin bên dưới http://jsbin.com/UWOquRA/1/edit?html,js,console,output
Xin vui lòng cho tôi biết những gì tôi đang làm sai.
Câu trả lời:
Tôi đã giải quyết nó bằng cách sử dụng type = "text / babel"
<script src="js/reactjs/main.js" type = "text/babel"></script>CẬP NHẬT: Trong React 0.12+, JSX pragma không còn cần thiết nữa.
Đảm bảo bao gồm pragma JSX ở đầu tệp của bạn:
/** @jsx React.DOM */Nếu không có dòng này, jsxbiến áp nhị phân và trong trình duyệt sẽ giữ nguyên các tệp của bạn.
type="text/babel". Brave thế giới mới của javascript
Sự cố Mã thông báo không mong đợi '<' là do thiếu cài đặt trước babel.
Giải pháp: Bạn phải cấu hình cấu hình webpack của mình như sau
{
test : /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader : 'babel',
query : {
presets:[ 'react', 'es2015' ]
}
}ở đây .jsx kiểm tra cả định dạng .js và .jsx.
bạn có thể chỉ cần cài đặt phụ thuộc babel bằng cách sử dụng nút như sau
npm install babel-preset-reactCảm ơn bạn
npm install babel-preset-reactđã giải quyết vấn đề của tôi.
.babelrctập tin trong dự án "presets": ["env", "react", "es2015"]và đó là nó !!
Bạn cần chuyển mã / biên dịch mã JSX đó sang javascript hoặc sử dụng trình biến đổi trong trình duyệt
Hãy xem http://facebook.github.io/react/docs/getting-started.html và lưu ý các <script>thẻ, bạn cần có những thẻ này để JSX hoạt động trong trình duyệt.
<script type="text/jsx">thẻ, nếu bạn muốn hãy dán toàn bộ mã của bạn thành một hastebin.org dán
Tôi gặp lỗi này và không thể giải quyết vấn đề này trong hai ngày. Vì vậy, việc khắc phục lỗi rất đơn giản. Trong nội dung, nơi bạn kết nối của bạn script, thêm type="text/jsx"và điều này sẽ giải quyết vấn đề.
Đây là một ví dụ làm việc từ jsbin của bạn:
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>Chạy mã này từ một tệp và nó sẽ hoạt động.
Nếu bạn giống tôi và dễ mắc phải những sai lầm ngớ ngẩn, hãy kiểm tra package.json của bạn nếu nó chứa cài đặt trước babel của bạn:
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},Để phân tích cú pháp thẻ chính xác, bạn sẽ cần sử dụng phiên bản babel này: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js và thuộc tính "type = 'text / babel'" trong kịch bản. Bên cạnh đó, tập lệnh tùy chỉnh của bạn phải nằm trong thẻ "body".
nếu chúng tôi xem xét cấu hình trang web thực của bạn, thì bạn cần chạy ReactJS trong đầu
<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>và thêm thuộc tính vào tệp js của bạn - type = "text / babel" như
<script src="../js/r1HeadBabel.js" type="text/babel"></script>thì ví dụ mã dưới đây sẽ hoạt động:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
); Sử dụng mã sau. Tôi đã thêm tham chiếu đến React và React DOM. Sử dụng ES6 / Babel để chuyển đổi mã JS của bạn thành JavaScript vani. Lưu ý rằng phương thức kết xuất đến từ ReactDOM và đảm bảo rằng phương thức kết xuất đó có mục tiêu được chỉ định trong DOM. Đôi khi bạn có thể gặp phải sự cố rằng phương thức render () không thể tìm thấy phần tử đích. Điều này xảy ra vì mã phản ứng được thực thi trước khi DOM hiển thị. Để chống lại điều này, hãy sử dụng jQuery ready () để gọi phương thức render () của React. Bằng cách này, bạn sẽ chắc chắn về việc DOM được hiển thị trước. Bạn cũng có thể sử dụng thuộc tính trì hoãn trên tập lệnh ứng dụng của mình.
Mã 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>Mã JS:
var LikeOrNot = React.createClass({
render: function () {
return (
<li>Like</li>
);
}
});
ReactDOM.render(<LikeOrNot />,
document.getElementById('main-content'));Hy vọng điều này giải quyết được vấn đề của bạn. :-)
Kiểm tra xem .babelrc có bên trong thư mục gốc ứng dụng của bạn, không bên trong thư mục con hay không. nếu đó là trường hợp, hãy di chuyển tệp sang thư mục gốc.
Bạn có thể sử dụng mã như sau:
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'));Và đừng quên thêm <div id='main-content'></div>vàobody tronghtml
Nhưng trong tệp package.json của bạn, bạn nên sử dụng các phần phụ thuộc này:
"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",
...
}Nó hoạt động với tôi nhưng tôi cũng đã sử dụng webpack, với các tùy chọn này (vào webpack.config.js):
module: {
loaders: [
{
test: /\.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: ['es2015', 'react']
}
}
]
}Tôi mới bắt đầu học Reactngày hôm nay và đang gặp phải vấn đề tương tự. Dưới đây là mã tôi đã viết.
<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>Và như bạn có thể thấy rằng tôi đã bỏ lỡ dấu phẩy (,) sau khi tôi sử dụng <Hello/>. Và chính lỗi đang nói chúng ta cần xem xét dòng nào.
Vì vậy, khi tôi thêm dấu phẩy trước tham số thứ hai cho ReactDOM.render()hàm, tất cả đều bắt đầu hoạt động tốt.
bạn có thể làm theo cách khác html
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
</body>
</html>tệp index.js với đường dẫn 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"));sử dụng gói này .json sẽ giúp bạn thiết lập và chạy nhanh chóng
{
"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": []
}Mặc dù, tôi đã có tất cả các trình tải babel thích hợp trong tệp cấu hình .babelrc của mình. Tập lệnh xây dựng với parcel-Bundler này đã tạo ra lỗi mã thông báo không mong muốn <và lỗi loại mime trong bảng điều khiển trình duyệt cho tôi khi làm mới trang thủ công.
"scripts": {
"build": "parcel build ui/index.html --public-url ./",
"dev": "parcel watch ui/index.html"
}Cập nhật tập lệnh xây dựng đã khắc phục sự cố cho tôi.
"scripts": {
"build": "parcel build ui/index.html",
"ui": "parcel watch ui/index.html"
}