Javascript 基本 React 示例出错：Uncaught TypeError: undefined is not a function
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26627665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error with basic React Example: Uncaught TypeError: undefined is not a function
提问by Laurie Young
I'm trying to get react connected into my app. Its a rails app using rails-react (though I don't think that's part of the problem). I'm currently using a very simple 1 component setup:
我正在尝试将 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')
);
My html file contains:
我的 html 文件包含：
<body>
<div id="content"></div>
<script src="/assets/react.js?body=1"></script>
<script src="/assets/react_admin.js?body=1"></script>
</body>
I can see that rails-react is converting my react_admin.js.jsx into react_admin.js as follows:
我可以看到 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')
);
However chrome is raising an ''Uncaught TypeError: undefined is not a function'' in the Render.react() call, which it shows between "(" and "CommentBox(null)"
然而，chrome 在 Render.react() 调用中引发了一个“Uncaught TypeError: undefined is not a function”，它显示在“(”和“CommentBox(null)”之间
Can someone tell me what I'm doing wrong?
有人能告诉我我做错了什么吗？
回答by ivn
After 0.14 React moved to ReactDOM.render(), so if you update React, your code should be:
在 0.14 React 移到 之后ReactDOM.render()，所以如果你更新 React，你的代码应该是：
ReactDOM.render(
<CommentBox />, document.getElementById('content'));
But make sure to include both react.jsand react-dom.jsin your project since those are now separated.
但一定要包括react.js和react-dom.js你的项目，因为这些都是现在分开了。
回答by Sebastián Grignoli
You should update to the latest React library.
你应该更新到最新的 React 库。
Some tutorials were updated to use React.render()instead of the deprecated React.renderComponent(), but the authors are still providing links to older versions or React, which do not have the newest render()method.
一些教程被更新为使用React.render()而不是弃用的React.renderComponent()，但作者仍然提供指向旧版本或 React 的链接，它们没有最新的render()方法。
回答by jsanchez
I'm not very familiar with React, but it looks like you should be using React.renderComponentinstead of React.render
我对 React 不是很熟悉，但看起来你应该使用React.renderComponent而不是React.render
By running your code generated by rails-reactlocally on my browser and playing with the Reactobject, it looks like the rendermethod does not exist. Instead, Reactcontains a renderComponentmethod:
通过rails-react在我的浏览器上运行本地生成的代码并使用该React对象，看起来该render方法不存在。相反，React包含一个renderComponent方法：
If you change the code to use React.renderComponentinstead of React.render, the component gets rendered on the DOM.
如果您将代码更改为使用React.renderComponent而不是React.render，则组件将在 DOM 上呈现。
You can see it working here: http://jsfiddle.net/popksfb0/
你可以在这里看到它的工作：http: //jsfiddle.net/popksfb0/
回答by Rajesh Hegde
After 0.13.x React moved React.renderComponent()to React.render().
0.13.x后反应感动React.renderComponent()到React.render()。
回答by Jamie Hutber
For reasons unknown to me I had to wrap mine in {}
由于我不知道的原因，我不得不把我的包裹起来 {}
So from:
所以从：
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'));
回答by rjbultitude
React.render was introduced in version 0.12 as documented here: https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html
React.render 是在 0.12 版中引入的，如此处所述：https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html
To fix your issue upgrade to that version or higher. At time of writing the latest version is 0.13.3.
要解决您的问题，请升级到该版本或更高版本。在撰写本文时，最新版本是 0.13.3。
回答by Kent Aguilar
- Download the latest React Starter Kit -> https://facebook.github.io/react/downloads.html
- Use react.jsand react-dom.jsfiles on the build folder.
- Instead of using the "text/jsx" use "text/babel" instead, referencing this minified library -> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js
- 下载最新的 React Starter Kit -> https://facebook.github.io/react/downloads.html
- 在构建文件夹中使用react.js和react-dom.js文件。
- 而不是使用“text/jsx”，而是使用“text/babel”，引用这个缩小的库 -> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js
Here's the full script referencing your initial code.
这是引用您的初始代码的完整脚本。
<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>
回答by Jorge.Methew
For beginners, the error (type/undefined is undefined) may also show up due to the placement of React.render code block.
对于初学者来说，也可能会因为 React.render 代码块的放置而出现错误（type/undefined 是 undefined）。
It should be placed after creating the components, preferably at the bottom.
它应该在创建组件后放置，最好放在底部。
