Question

我是新来的反应者，我试图运行一个发现的简单代码示例，该代码的用途是显示一些选项卡。我遇到了一些技术问题。

我收到此错误：在我的JS代码的第一行上出现了“ Uncaught ReferenceError：require未定义”：从'react'导入React；

似乎无法识别我的反应代码。

请帮助，非常感谢：）

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dashboard Support Tool Center</title>

    <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
    <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
    <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

</head>
<body>
</body>
<script type="text/babel" src="/dashboards/react/dashboardCenter.js"></script>
</html>

反应/ JS：

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

import Tabs from './Tabs';
require('/dashboards/css/tabStyles.css');

function App() {
    return (
        <div>
        <h1>Tabs Demo</h1>
        <Tabs>
            <div label="Gator">
                See ya later, <em>Alligator</em>!
            </div>
            <div label="Croc">
                After 'while, <em>Crocodile</em>!
            </div>
            <div label="Sarcosuchus">
                Nothing to see here, this tab is <em>extinct</em>!
            </div>
        </Tabs>
    </div>
);
}

const container = document.createElement('div');
document.body.appendChild(container);
render(<App />, container);

Answer 1

您必须在HTML中包含对requrejs库的引用：

<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" ></script>

修改

大多数浏览器无法识别js文件中的

import和require。您必须使用ES6 module system。您的路还很长；）

无法识别react语法

1 个答案: