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語法爲小寫「反應」，而不是大寫「反應」

回答

相關問題