Question

您好，我有新的反应，我试图运行这个简单的片段，但它不起作用：

   

 <head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
    </head>

    <body>
      <div id="app_root"></div>
      
  <script type="text/babel">
        var Hello = React.createClass({ 
                   render: function() { 
                      return(
                      <div>Hello World!</div>
                     ); 
             } 
       }); 
        ReactDOM.render(<Hello />, document.getElementById("app_root"));
      </script>
    </body>

控制台没有显示任何错误消息，运行脚本后我没有得到任何输出

Answer 1

在其他答案中提到，因为JSX需要babel。在您的情况下，只需要包含babel而不仅仅是browser-polyfill：

＆＃13;

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>

<body>
    <div id="app_root"></div>
      
    <script type="text/babel">
        var Hello = React.createClass({ 
            render: function() { 
                return(
                    <div>Hello World!</div>
                ); 
            } 
       }); 

       ReactDOM.render(<Hello />, document.getElementById("app_root"));
    </script>
</body>

＆＃13;

Answer 2

如果你不想使用JSX，Babel ......你必须用val pivotedDF = myDF.groupBy($"COL1").pivot("BUCKET").count val buckets = pivotedDF.columns.filter(_ != "COL1") buckets.drop(1).foldLeft((pivotedDF, buckets.head))( (acc, c) => ( acc._1.withColumn(c, col(acc._2) + col(c)), c ) )._1.show // +----+---+---+---+---+ // |COL1| 0| 1| 2| 3| // +----+---+---+---+---+ // | bar| 1| 2| 3| 4| // | foo| 2| 4| 5| 6| // +----+---+---+---+---+替换JSX定义<Hello />

我没有测试以下代码，但在我看来这应该是正确的：

React.createElement(Hello, null, null)

Answer 3

Codepen版本运行正常：https://codepen.io/svitch/pen/ypPLwN

这意味着您的问题是Babel脚本。我同意@bmceldowney - polyfill版本是不够的，只包括cdnjs的常规版本。

你也可以写简单的“Hello World”而不用Babel：

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
</head>
<body>
  <div id="app_root"></div>
  <script>
    var element = React.createElement(
        'div',
        null,
        'Hello World'
    )

    ReactDOM.render(
      element,
      document.getElementById('app_root')
    );
  </script>
</body>
</html>

简单的React Snippet不工作

3 个答案: