糟糕的JSFiddle配置

时间:2017-07-20 01:27:04

标签: javascript reactjs

我对React很新,我遇到了问题。当我尝试运行我的代码时,我会发出警告说"Bad JSFiddle configuration, please fork the original React JSFiddle"

这是我的React代码:



<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">

</div>

<script>
  var Hello = React.createClass({
    render: function() {
      return <div > Hello {
        this.props.name
      } < /div>;
    }
  });

  ReactDOM.render( <
    Hello name = "World" / > ,
    document.getElementById('container')
  );
</script>
&#13;
&#13;
&#13;

我直接从Facebook JSFiddle基线复制粘贴它。

你能帮我找出我错过的东西吗?

1 个答案:

答案 0 :(得分:1)

由于您使用的是JSX,Facebook将设置限制为JS 1.7,您可能需要使用Babel将其编译为javascript。

使用编译脚本(JSX)链接和Coffee脚本语法,您可以执行React代码示例。

试试这个有效的代码:https://jsfiddle.net/9gnkLgex/

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

<script>
  Hello = React.createClass(
    displayName: 'Hello',
    render: () ->
        React.createElement("div", null, "Hello ", this.props.name)
)

React.render(
    React.createElement(Hello, {name: "World"}),
    document.getElementById('container')
)
</script>

希望它有所帮助!