React TypeError：React.renderComponent 不是函数答案

【问题标题】：React TypeError: React.renderComponent is not a functionReact TypeError：React.renderComponent 不是函数
【发布时间】：2015-08-22 07:06:31
【问题描述】：

在按照 React 教程构建一个简单的应用程序后，我收到了这个奇怪的消息。 http://blog.revathskumar.com/2014/05/getting-started-with-react.html

我使用 bower 安装 react 并包含如下脚本：

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

如教程中所述。起初我以为脚本没有加载，但显然不是这样。有什么问题？

【问题讨论】：

标签： reactjs render

【解决方案1】：

我遇到了同样的问题；我完全按照教程进行操作，但遇到了与您相同的错误。

这些是我需要进行的更改才能使其正常工作...

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

【讨论】：

【解决方案2】：

最近 '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'));

【讨论】：

【解决方案3】：

你应该写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

这三个javascript是必需的

【讨论】：

【解决方案4】：

下载最新的 React Starter Kit -> https://facebook.github.io/react/downloads.html
使用 build 文件夹中的 react.js 和 react-dom.js 文件。
不使用“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>

【讨论】：

【解决方案5】：

现在是

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.

【讨论】：

【解决方案6】：

bower 在本例中安装最新版本 0.12.0。

渲染函数约定发生了变化。

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

组件已从我们所有的 React.render* 方法中删除。

所以用

    React.render(

而不是

   React.renderComponent(

【讨论】：

实际上它目前安装的是 0.13.x。如果是 0.12.x，则该版本仅弃用该功能而不删除它，但 .13 将其删除。