33

反応をアプリに接続しようとしています。rails-react を使用した Rails アプリです (問題の一部ではないと思いますが)。私は現在、非常に単純な 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 は Render.react() 呼び出しで「Uncaught TypeError: undefined is not a function」を発生させており、「(」と「CommentBox(null)」の間に表示されます。

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

4

8 に答える 8

15

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

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

于 2015-06-07T22:10:55.803 に答える
2

0.13.x の後、React は に移動React.renderComponent()しましたReact.render()。

于 2015-09-28T11:43:59.183 に答える
2

私にはわからない理由で、私は私のものを包む必要がありました{}

だからから：

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

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

へ (作業中):

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

render(Router, document.getElementById ('app'));
于 2016-06-09T21:56:19.667 に答える
1
  1. 最新の React Starter Kit をダウンロード -> https://facebook.github.io/react/downloads.html
  2. build フォルダーで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>
于 2015-12-18T18:56:05.000 に答える