7

Facebook のread.js チュートリアルに沿って進むと、次のエラーが発生します。

Uncaught TypeError: Property 'CommentList' of object [object Object] is not a function

実際、react.js のサンプル ページには次のようなものがあります。

Uncaught TypeError: object is not a function

誰でも正しい使い方を説明できますか?

チュートリアルの進捗状況

次の 2 つの JavaScript をインポートします。

http://fb.me/react-0.4.1.js http://fb.me/JSXTransformer-0.4.1.js

HTML は 1 行です。

  <div id="content"></div>

そしてJavaScriptは、むしろ<script type="text/jsx"> 次のようになります。

var CommentBox = React.createClass({
    render: function() {
        return (
           <div class="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
        </div>
        );
    }
});


React.renderComponent(
    <CommentBox />,
    document.getElementById('content')
);


var CommentList = React.createClass({
    render: function() {
        return (
        <div class="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
        </div>
    );
    }
});
4

1 に答える 1

11

ここで進行中の主な問題は 2 つあります。

まず、React.renderComponent が呼び出されたとき、CommentList は割り当てられていないため、まだ定義されていません。CommentBox の render 関数が参照しているため、これはエラーを引き起こしています

<CommentList />

どのjsxがコンパイルされますか

CommentList(null)

これが実行され、CommentList が未定義の場合、undefined は関数ではないため、エラーが発生します。これを修正するには、React.renderComponent の呼び出しの前に CommentList 宣言を移動するだけです。

次に、Comment と CommentForm はどこにも定義されていません。それらへの参照を削除するか、チュートリアルからそれらの宣言を取り込む必要があります。

参考までに、元のコードの jsfiddle を次に示します: http://jsfiddle.net/jacktoole1/nHTr4/

Comment の宣言を含め、CommentForm への参照を単に削除すると、修正されたコードは次のようになります: http://jsfiddle.net/jacktoole1/VP5pa/

于 2013-09-18T16:42:02.773 に答える