我正试图开始在ReactJS中建立一个网站.然而,当我试图将我的JS放在一个单独的文件中时,我开始收到这个错误:"unauget SyntaxError:Underful Token<".

我try 在JS文件的顶部添加/** @jsx React.DOM */,但没有修复任何问题.下面是HTML和JS文件.你知道哪里出了问题吗?

HTML

<html>
  <head>
    <title>Page</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
    <script src="./lander.js"> </script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
        React.render(
            <Lander />,
            document.getElementById('content')
        );
    </script>
  </body>
</html>

JS

/**
 * @jsx React.DOM
 */
var Lander = React.createClass({
    render: function () {
        var info = "Lorem ipsum dolor sit amet... ";
        return(
            <div>
                <div className="info">{info}</div>
            </div>
        );
    }
});

编辑:我意识到我需要在包含着陆器代码的script标记中添加type="text/jsx".但是,在添加此文件并重新加载后,我收到以下警告

"您正在使用浏览器内的JSX转换器.请确保为Production-http://facebook.github.io/react/docs/tooling-integration.html#jsx预编译您的JSX."

后跟此错误:

"XMLHttpRequest无法加载资源跨源请求仅支持以下协议方案:HTTP、DATA、Chrome-Extension、HTTPS、Chrome-Extension-file:/Users/./lander.js.."

似乎我还需要做一些其他事情才能使浏览器JSX转换正常工作,但我不确定是什么.

编辑:哦,我需要用MAMP或其他什么来主持吗?

推荐答案

更新-- 请改用以下内容:

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

添加type="text/jsx"作为script标记的属性,用于包括必须由JSX Transformer转换的JavaScript文件,如下所示:

<script type="text/jsx" src="./lander.js"></script>

然后,您可以使用MAMP或其他服务在localhost上托管页面,以便所有包含的内容都能正常工作,如here所述.

谢谢大家的帮助!

Html相关问答推荐

Select 包含iframe的图形<><>

UseEffect()从不调用preact

在 bootstrap 中的弹性项之间添加连接行

<;img>;和具有负边距的元素的堆叠顺序

在NzMessageService中传递动态TemplateRef- Angular 15

如何使用html和css关键帧创建动画

Bootstrap nav没有崩溃

风格规则应该适用于响应图像的哪些方面?哪种规则适用于<;图片和gt;,哪种规则适用于<;img>;?

我的Django应用程序中出现模板语法错误

高度:适合-内容不拉伸以适合内部长度

动画的停止和启动并不顺利

如何在ASP.NET Core中添加换行符

顶部有文字的图像的悬停效果

Swift WkMessageHandler 消息不发送

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

HTML、CSS设计图像出格

带有伪元素的不规则形状的渐变边框

是否可以将文本添加到表格边框?

涉及短代码时如何在页面上定位元素?

如何突出显示 .qmd html 文件中的特定代码行