Javascript 基本反应错误示例：未捕获类型错误：未定义不是函数

我正在尝试将react连接到我的应用程序中。这是一个使用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')
);

但是，chrome在Render.react（）调用中引发了一个“UncaughtTypeError:undefined不是函数”，它显示在“（”和“CommentBox（null）”之间

---

有人能告诉我我做错了什么吗？

我对React不太熟悉，但看起来你应该使用

React.renderComponent

而不是

React.render

通过在我的浏览器上本地运行由

rails react

生成的代码并使用

react

对象，看起来

render

方法不存在。相反，

react

包含

renderComponent

方法：

如果将代码更改为使用

React.renderComponent

而不是

React.render

，则会在DOM上渲染组件

---

您可以看到它在这里工作：

您应该更新到最新的React库

一些教程已更新为使用

React.render（）

而不是弃用的

React.renderComponent（）

，但作者仍提供指向旧版本或React的链接，这些版本没有最新的

render（）

方法。

对于初学者，错误（type/undefined是未定义的）也可能由于React.render代码块的放置而显示

---

它应该在创建组件后放置，最好放在底部。

React.render在版本0.12中引入，如下所述：

---

若要解决问题，请升级到该版本或更高版本。编写时，最新版本为0.13.3。

0.13.x之后，React移动到

React.renderComponent（）

到

React.render（）

0.14之后，React移动到

React.render（）

，因此如果更新React，您的代码应该是：

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

ReactDOM.render(
，document.getElementById（'content'）；

但是请确保在项目中同时包含

react.js

和

react dom.js

，因为它们现在是分开的

下载最新的React初学者工具包->

在生成文件夹中使用react.js和react-dom.js文件

不要使用“text/jsx”，而是使用“text/babel”，引用这个缩小的库->

下面是引用初始代码的完整脚本

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

.评论框{
颜色：红色；
字体大小：16px；
字体大小：粗体
}
var CommentBox=React.createClass({
render:function（）{
返回(
React.DOM.div（{className:“commentBox”}，
“你好，世界！我是一个评论箱。”
)
);
}
});
ReactDOM.render(
,
document.getElementById（'content'）
);
由于我不知道的原因，我不得不用
{}

因此，来自：

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

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

到（工作）：

renderComponent在最新版本中刚刚折旧，应使用React.render确保您拥有最新的React版本，应为v0.12.0。如果您有任何旧版本，则应使用现在折旧的
React.renderComponent
，正如@jsanchez在下面的回答中建议的那样。这是对我的正确答案。我是使用v0.15时，我正在这样使用，但出现了错误。能否请您帮助我ReactDOM.render（，document.getElementById（'Ishim'））；@IshimdarAhamad根据您的评论很难提供帮助。也许您没有在project中导入ReactDOM？导入React是不够的。
从“React dom”导入ReactDOM；
感谢您还原消息，现在它正在工作，实际上，我正在观看React JS的旧视频，因为您只是从Reac导入
渲染
t如果
从“react dom”导入ReactDOM；
则必须使用
ReactDOM.render（Router，document.getElementById（'app'）；
检查更多信息。对于ES6新手，请记住准确使用变量{render}。因为您只导出“render”完整模块的项。如果要使用其他名称，可以使用->
import{render as customRenderer}从“react dom”；
<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>

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