javascript - 在 html 中引用 jsx 文件时,React 渲染方法不起作用

标签 javascript reactjs jsx

我试图从我的 html 中引用 jsx 文件,但渲染函数没有显示任何内容,并且控制台中没有任何错误。

*注意 - 我更改了下面的 Facebook CDN 链接,因为 SO 不允许它们。 CDN 链接不是问题。

我的代码如下所示:

HTML

<html>
  <head>
    <script src="https://f*b.me/react-0.14.6.js"></script>
    <script src="https://f*b.me/react-dom-0.14.6.js"></script>
    <script src="http://f*b.me/JSXTransformer-0.12.1.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>

  <body>
    <div class="container">
      <div id="loggedin"></div>
    </div>
    <script type="text/babel" src="js/script.jsx"></script>
  </body>
</html>

JSX

var App = React.createClass({
    render: function() {
        return(
            <h1>Hello</h1>
        )
    }
});

ReactDOM.render(<App />, document.getElementById('loggedin'));

最佳答案

React 使用 babel 将 jsx 转换为 js。因此,添加 babel 而不是 JSXTransformer 并将文件保存为 .js 而不是 .jsx

将其添加到您的脚本中

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

Reference

关于javascript - 在 html 中引用 jsx 文件时,React 渲染方法不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39768764/

相关文章:

javascript - Javascript 能否以最少的功能实现类似 JSX 的语法?

javascript - Props 未传递给 React 组件

javascript - 如何区分React中的元素

javascript - 后备方法在带有 Rails 2.3 的 i18n-js 中不起作用

javascript - 选择一个元素 | Javascript 与 Jquery

javascript - 该按钮不执行该功能

javascript - 有没有办法在 Android Webview(使用 CSP)上为 WebWorker 启用 fileuri 访问?

javascript - 在不循环的情况下查询 Firestore 集合中的所有文档

reactjs - 如何为 graphql 生成 TypeScript 定义

javascript - 我们需要导入 React 还是只导入 {Component, PropTypes} 就可以了?