jsx --watch转换jsx语法为小写“反应”，而不是大写“反应”

我松散地跟着facebooks在这里反应教程， http://facebook.github.io/react/docs/getting-started.html，但我将它应用到不同的HTML文件。jsx --watch转换jsx语法为小写“反应”，而不是大写“反应”

这是我的html文件的基础上，反应入门套件：

<html> 
    <head> 
    <title>Hello React</title> 
    <script src="http://fb.me/react-0.8.0.js"></script> 
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script> 
    </head> 
    <body> 
    <div id="content"></div> 
    <script src="build/comment.js"></script> 
    </body> 
</html>

我安装了反应的工具，现在当我运行 “JSX --watch的src /建设/”

这是将这个片段：

var CommentBox = React.createClass({ 
    render: function() { 
    return (
     <div className="commentBox"> 
     Hello, world! I am a CommentBox. 
     </div> 
    ); 
    } 
}); 
React.renderComponent(
    <CommentBox />, 
    document.getElementById('content') 
);

进入这个片段：

var CommentBox = React.createClass({displayName: 'CommentBox', 
    render: function() { 
    return (
     react.DOM.div({className:"commentBox"}, 
     " Hello, world! I am a CommentBox. " 
    ) 
    ); 
    } 
}); 
React.renderComponent(
    CommentBox(null), 
    document.getElementById('content') 
);

但教程显示了这个片段：

// tutorial1-raw.js 
var CommentBox = React.createClass({ 
    render: function() { 
    return (
     React.DOM.div({ 
     className: 'commentBox', 
     children: 'Hello, world! I am a CommentBox.' 
     }) 
    ); 
    } 
}); 
React.renderComponent(
    CommentBox({}), 
    document.getElementById('content') 
);

由于小写“R”的，网页引发错误，“反应没有定义”。这是真的。从chrome的控制台我可以确认“反应”，而不是“反应”被定义。

我怎么JSX建立正确的输出作为本教程中介绍？

来源

2014-01-15 natobyte

在您的JSX顶部文件，你应该有注释：

/** @jsx React.DOM */

我猜你输入错误的react.DOM。

来源

2014-01-15 06:50:48

这就是它！你知道什么可能导致其他不一致，如CommentBox（null）vs CommentBox（{}）和“你好...”vs“你好...”吗？ – natobyte

我认为其他的差异是本教程中的一个错误。我会记下来修正它。 –

jsx --watch转换jsx语法为小写“反应”，而不是大写“反应”

回答

相关问题