javascript - JSX 编译器输出不是有效的 JavaScript

Question

我在玩 React 时遇到了离线 JSX 编译器的问题。

这是我的 JSX 代码，它位于一个名为 helloworld.js 的文件中，位于我的项目根目录中一个名为 src 的文件夹中:

/** @jsx React.DOM */

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

React.renderComponent(
    <Hello name={"Jane Doe"} />,
    document.getElementById('example')
);

在命令行中，当我导航到项目的根目录并运行此命令时:

jsx /src /build

输出文件 helloworld.js 在 build 文件夹中生成，但它不包含有效的 JavaScript。

内容如下:

/** @jsx React.DOM */

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

React.renderComponent(
    <Hello name={"Jane Doe"} />,
    document.getElementById('example')
);

如您所见，它仍然包含内联 HTML 而不是有效的 JavaScript。命令行中没有错误指示。它看起来像这样:

built Module("helloworld")
["helloworld"] 

有人知道为什么会这样吗？

Answer 1

也许尝试将您的 html 括在方括号中。

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