web-dev-qa-db-ja.com

React TypeError：React.renderComponentは関数ではありません

Reactシンプルなアプリを構築するチュートリアルに従ってください。 http://blog.revathskumar.com/2014/05/getting-started-with- react.html

私はbowerを使用して反応をインストールし、次のようなスクリプトを含めました。

<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>

チュートリアルのように。最初はスクリプトがロードされていないと思っていましたが、明らかにそうではありません。何が問題ですか？

reactjsrender
17
Webconstructor

最近は

ReactDOM.render(

ソースファイルを含めます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>

これはReactからの警告です：

Warning: React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead.
23
Connor Leech

bowerは、この場合はバージョン0.12.0の最新バージョンをインストールします。

レンダリング関数の規則に変更があります。

https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

すべてのReact.render *メソッドからコンポーネントが削除されました。

使用する

    React.render(

の代わりに

   React.renderComponent(
17
Webconstructor

最近「React.render（）」は減価償却されているため、「ReactDom.render（）」を使用してください

import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App.jsx';
require('./main.scss');

ReactDOM.render(<App />, document.getElementById('container'));
7
Ignatius Andrew

同じ問題がありました。チュートリアルを正確に実行したところ、同じエラーが発生しました。

これらは、それを機能させるために必要な変更です...

npm install --save react-dom

かわった index.jsxコンテンツ：

/** @jsx React.DOM */
'use strict'
var ReactDOM = require('react-dom')
var Hello = require('./Hello')
ReactDOM.render(<Hello />, document.getElementById('content'))

そしてそれはそれを得た

私は反応するのが非常に新しいので、これは最善の解決策ではないかもしれませんが、今のところは私のものです。

edit：それ以来、別の、より最近のウォークスルーを見つけました（動作します） https://www.twilio.com/blog/ 2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

3
FraggaMuffin
  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

参照用の完全なスクリプトは次のとおりです

<div id="target-container"></div>

<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
    var MyComponent = React.createClass({
        render: function(){
            return(
                <h1>Sample text</h1>
            );
        }
    });

    ReactDOM.render(
        <MyComponent/>,
        document.getElementById('target-container')
    );
</script>
1
Kent Aguilar

ReactDOM.renderの代わりにReact.renderと書く必要があります。

https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js

これら3つのJavaScriptが必要です

0
Quera