基本反应错误示例：未捕获TypeError：undefined不是函数

我试图将反应连接到我的应用程序中。其使用rails的rails应用程序反应（尽管我不认为这是问题的一部分）。我目前使用一个非常简单的1个组件设置：基本反应错误示例：未捕获TypeError：undefined不是函数

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

我可以看到，轨反应的是我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') 
);

但是铬被提高的“”未捕获的类型错误：未定义不是一个函数“在Render.react（）调用，其中它显示之间”“（”和“CommentBox（空）”

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

来源

2014-10-29 Laurie Young

确保你有最新的反应版应该是v0.12.0。如果你有任何旧版本，你应该使用现在折旧的'React.renderComponent'作为@jsanchez在下面的回答中建议 – trekforever 2014-10-29 18:47:47

我不是很熟悉的反应，但它看起来像你应该使用React.renderComponent代替React.render

通过本地运行在浏览器上通过rails-react生成的代码，并与React对象播放，它看起来像render方法不存在。相反，React包含renderComponent方法：

enter image description here

如果你改变了代码，使用React.renderComponent，而不是React.render，组件大干快上的DOM渲染。

你可以看到它在这里工作：http://jsfiddle.net/popksfb0/

来源

2014-10-29 10:47:22 jsanchez

+14

renderComponent只是在最新版本中折旧，应该使用React.render http：//facebook.github .io/react/blog/2014/10/28/react-v0.12.html＃deprecations – trekforever 2014-10-29 18:43:05

你应该升级到最新阵营库。

一些教程进行了更新，以使用React.render()代替过时React.renderComponent()，但作者仍然提供链接到旧版本或反应，不具有最新的render()方法。

来源

2015-06-07 22:10:55

对于初学者来说，由于放置React.render代码块，错误（类型/未定义未定义）也可能出现。

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

来源

2015-07-09 11:08:28

React.render在0.12版本中引入的记录在这里： https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

要解决您的问题，升级到该版本或更高版本。在撰写本文时，最新版本是0.13.3。

来源

2015-07-14 08:32:25 rjbultitude

After 0.13.x React moved React.renderComponent() to React.render()。

来源

2015-09-28 11:43:59

0.14反应后搬到ReactDOM.render()，因此，如果您更新反应，你的代码应该是：

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

但一定要包括react.js和react-dom.js在您的项目，因为这些都是现在分开了。

来源

2015-11-23 20:49:57 ivn

这对我来说是正确的答案。我正在使用v0.15 – 2016-06-16 08:55:08

我正在使用这样的，但得到错误。 ReactDOM.render（，document.getElementById（'Ishim'））; – 2017-06-10 19:54:07

@IshimdarAhamad根据你的评论很难提供帮助。也许你没有在项目中导入ReactDOM？导入React是不够的。 ''从'react-dom'导入ReactDOM;' – ivn 2017-06-11 09:25:09

下载最新的阵营入门套件 - >https://facebook.github.io/react/downloads.html
使用react.js和反应-dom.js在build文件夹文件。
而不是使用“文本/ JSX”用“文/巴别塔”代替，参考此缩小的库 - >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-18 18:56:05

对于我不知什么原因，我在{}

从

所以包矿：

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-09 21:56:19

这是因为您仅从ReactDOM导入了'render'。如果你从“react-dom”导入ReactDOM;''比你不得不使用'ReactDOM.render（Router，document.getElementById（'app'））;'检查https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Statements/import获取更多信息。 – ivn 2016-07-18 11:50:50

对于那些刚接触ES6的人，请记住准确使用变量{render}。因为您仅导出完整模块的“渲染”项目。如果你想使用不同的名字，你可以使用'react-dom'来导入{render as customRenderer};' – 2017-09-29 16:29:12

基本反应错误示例：未捕获TypeError：undefined不是函数

回答

相关问题