Question

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

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

<!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>

Answer 1

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

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

Answer 2

浏览器无法解释JSX，因此您无法直接在要在此类浏览器上呈现的HTML页面中执行return <div>MyComponent</div>之类的操作。您需要使用Babel将JSX转换为ES5，然后再将其导入浏览器进行解释。

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

2 个答案: