当在html中引用jsx文件时，React渲染方法不工作

React render method not working when referencing jsx file in html

本文关键字：React 方法 工作 html 引用 jsx 文件 当在      更新时间：2023-09-26

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

*注意-我改变了fb CDN链接下面的SO不允许他们。CDN链接不是问题。

我的代码是这样的:

<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>
参考

相关文章：