Laravel 8 babel 意外标记“<”和“;”预期在类名上

Question

我正在尝试学习 laravel 中的 React，我所做的是：

安装laravel
运行 composer require laravel/ui
运行 php artisan ui 反应

并学习一些教程，问题是：此代码有效：

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

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>

                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

但是当使用 class 时，这个 return 意外的标记“<”和“;”预期 class姓名：

import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Button } from 'reactstrap';

class Index extends React.Component{
    render(){
        return{
            <div className="App container">
                <Table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Breakfast</td>
                            <td>Nasi Lemak</td>
                            <td>
                                <Button color="success" size="sm" className="ms-2">Edit</Button>
                                <Button color="danger" size="sm">Delete</Button>
                            </td>
                        </tr>
                    </tbody>
                </Table>
            </div>
        }
    }
}

package.json 中的 babel 配置是（新 laravel 安装）：

"devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "axios": "^0.21",
    "bootstrap": "^4.0.0",
    "jquery": "^3.2",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "popper.js": "^1.12",
    "postcss": "^8.1.14",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.15.2",
    "sass-loader": "^8.0.0"
}

谁能给我指出正确的方向？有没有额外的babel配置？

Answer 1

您需要使用 return - return(<div>...</div>) 而不是 return{<div>...</div>}

来保留圆括号

Laravel 8 babel 意外标记“<”和“;”预期在类名上

Laravel 8 babel unexpected token '<' and ';' expected on className

laravel

reactjs

babeljs