web-dev-qa-db-ja.com

基本的なReactのエラー：例：Uncaught TypeError：undefined is a functionではありません

反応をアプリに接続しようとしています。そのa Rails Rails-reactを使用したアプリ（これは問題の一部ではないと思いますが）。現在、非常にシンプルな1コンポーネントのセットアップを使用しています。

// react_admin.js.jsx

/** @jsx React.DOM */
var CommentBox = React.createClass({
  render: function() {
    return (
     <div className="commentBox">
       Hello, world! I am a CommentBox.
      </div>
   );
  }
});

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

私のhtmlファイルには以下が含まれます。

<body>
  <div id="content"></div>
  <script src="/assets/react.js?body=1"></script>
  <script src="/assets/react_admin.js?body=1"></script>
</body>

次のように、Rails-reactがreact_admin.js.jsxをreact_admin.jsに変換していることがわかります。

/** @jsx React.DOM */

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

React.render(
  CommentBox(null),
  document.getElementById('content')
);

ただし、chromeは、 "（"と "CommentBox（null）"の間に表示されるRender.react（）呼び出しで「Uncaught TypeError：undefined is a function not not」を発生させています

誰かが私が間違っていることを教えてもらえますか？

javascriptreactjsreact-jsxreact-rails
32
Laurie Young

0.14 ReactがReactDOM.render()に移動したため、Reactを更新する場合、コードは次のようになります。

ReactDOM.render(
  <CommentBox />, document.getElementById('content'));

ただし、react.jsおよびreact-dom.jsはプロジェクト内で分離されているためです。

67
ivn

最新のReactライブラリに更新する必要があります。

いくつかのチュートリアルは、非推奨のReact.render()の代わりにReact.renderComponent()を使用するように更新されましたが、著者はまだ最新のrender()メソッドを持たない古いバージョンまたはReactへのリンクを提供しています。

15
Sebastián Grignoli

私はReactにあまり詳しくありませんが、React.renderComponentの代わりにReact.renderを使用する必要があるようです

ブラウザでRails-reactによってローカルで生成されたコードを実行し、Reactオブジェクトを操作すると、renderメソッドが存在しないように見えます。代わりに、ReactにはrenderComponentメソッドが含まれます。

enter image description here

React.renderComponentの代わりにReact.renderを使用するようにコードを変更すると、コンポーネントはDOMにレンダリングされます。

ここで動作していることがわかります： http://jsfiddle.net/popksfb0/

4
jsanchez

私にはわからない理由で、私は{}

から：

import React from "react";
import render from "react-dom";
import Router from "./Router";

render(Router, document.getElementById ('app'));

To（Working）：

import React from "react";
import {render} from "react-dom";
import Router from "./Router";

render(Router, document.getElementById ('app'));
2
Jamie Hutber

0.13.x以降React React.renderComponent()をReact.render()に移動しました。

2
Rajesh Hegde
  1. 最新のダウンロードReactスターターキット-> https://facebook.github.io/react/downloads.html
  2. ビルドでreact.jsおよびreact-dom.jsファイルを使用しますフォルダ。
  3. 「text/jsx」を使用する代わりに、「text/babel」を使用して、この縮小ライブラリを参照します-> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser .min.js

初期コードを参照する完全なスクリプトを次に示します。

<style>
    .commentBox{
        color:red;
        font-size:16px;
        font-weight:bold
    }
</style>

<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

<script type="text/babel">
    var CommentBox = React.createClass({
        render: function(){
            return (
              React.DOM.div({className: "commentBox"}, 
                "Hello, world! I am a CommentBox."
              )
            );
        }
    });

    ReactDOM.render(
        <CommentBox/>,
        document.getElementById('content')
    );
</script>
1
Kent Aguilar

React.renderは、ここに記載されているようにバージョン0.12で導入されました： https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

問題を修正するには、そのバージョン以上にアップグレードしてください。執筆時点では、最新バージョンは0.13.3です。

1
rjbultitude

初心者の場合、React.renderコードブロックの配置により、エラー（タイプ/未定義は未定義）も表示される場合があります。

コンポーネントを作成した後、できれば下部に配置する必要があります。

0
Jorge.Methew