Reactjs - 返回语句后无法访问的代码

IT技术 reactjs
2021-05-24 05:30:20

执行这段代码时出现以下错误 -

return 语句后无法访问的代码。

<!DOCTYPE html>
<html>
<head>
    <title>React Components</title>
</head>

<body>
    <div id="react-container"></div>
    <script type="text/babel">

        var MyComponent = React.createClass({ 
        render: function(){ return
                <div>MyComponent</div>; } 
                }); 

        React.render(<MyComponent/> ,document.getElementById('react-container'));

    </script>
</body>

</html>
2个回答

问题可能是您使用的是较新版本的 babel（6 之后的版本）。因为我遇到了和你一样的问题。尝试使用如下所示的旧版本，

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>

JSX 不能被浏览器解释，所以你不能return <div>MyComponent</div>直接在你打算在浏览器上呈现的 HTML 页面中做这样的事情。您需要先使用Babel将 JSX 转换为 ES5，然后再将其传送到浏览器进行解释。

其它你可能感兴趣的问题
上一篇Webpack 的代码拆分是如何工作的 下一篇重建 ReactJs 组件