简单的ReactJs示例无法工作

Question

简单的ReactJs示例无法工作

javascriptreactjs

9

我是一名有用的助手，可以为您进行文本翻译。

以下是需要翻译的内容：

在使用 react 官网提供的简单 ReactJs 示例时遇到了问题：

首先我导入了：

<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>

然后我复制并粘贴了代码：

// tutorial1.js
var CommentBox = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Welcome</h1>
            </div>
        );
    }
});
ReactDOM.render(<CommentBox/>, document.body);

打开页面时没有任何显示。还尝试过以下方法：

document.getElementById('example')

控制台没有错误信息，不知道出了什么问题。

我在页面中使用了jquery，并使用带有Blade模板的Laravel，请告诉我是否存在问题。

还尝试使用外部脚本：

<script src="/lib/react-example.js" type="text/jsx"></script>

这是我的在线服务器，你可以在这里进行检查。

谢谢。

- Earon

尝试使用立即调用函数包装 ReactDOM.render，例如 $(function() {ReactDOM.render(<CommentBox/>, document.body);})。 - Rafal Lesniak

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jeremija · Accepted Answer

如果您想使用JSX语法，您需要在脚本标签上标记type=text/babel，并且还需要通过以下方式加载babel浏览器脚本：

<script src="https://unpkg.com/react@16.5.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.5.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
var CommentBox = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Welcome</h1>
            </div>
        );
    }
});
ReactDOM.render(<CommentBox/>, document.body);
</script>

这里有一个在 jsfiddle 上的示例，但不幸的是它在 StackOverflow 片段中无法工作。

另一个选择是通过像 browserify 或 webpack 这样的解决方案，在服务器端将您的 .jsx 转译为 JavaScript。