基本React错误示例:Uncaught TypeError:undefined不是函数

Lau*_*ung 32 javascript reactjs react-jsx react-rails

我正在尝试将反应连接到我的应用程序中.它是一个使用rails-rails的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')
);
Run Code Online (Sandbox Code Playgroud)

我的html文件包含:

<body>
  <div id="content"></div>
  <script src="/assets/react.js?body=1"></script>
  <script src="/assets/react_admin.js?body=1"></script>
</body>
Run Code Online (Sandbox Code Playgroud)

我可以看到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')
);
Run Code Online (Sandbox Code Playgroud)

然而,chrome在Render.react()调用中引发了''Uncaught TypeError:undefined不是函数',它在"("和"CommentBox(null)"之间显示)

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

ivn*_*ivn 67

在0.14 React移动后ReactDOM.render(),所以如果你更新React,你的代码应该是:

ReactDOM.render(
  <CommentBox />, document.getElementById('content'));
Run Code Online (Sandbox Code Playgroud)

但请确保在项目中包含这两者react.js,react-dom.js因为它们现在是分开的.


Seb*_*oli 15

您应该更新到最新的React库.

一些教程已更新为使用React.render()而不是已弃用React.renderComponent(),但作者仍然提供旧版本或React的链接,这些版本没有最新的render()方法.


jsa*_*hez 4

我对 React 不太熟悉,但看起来你应该使用React.renderComponent而不是React.render

通过在我的浏览器上运行本地生成的代码rails-react并使用该React对象,看起来该render方法不存在。相反,React包含一个renderComponent方法:

在此输入图像描述

如果您将代码更改为使用React.renderComponent而不是React.render,则组件将在 DOM 上呈现。

您可以在这里看到它的工作原理:http://jsfiddle.net/popksfb0/

  • renderComponent 在最新版本中刚刚被贬值,应该使用 React.render http://facebook.github.io/react/blog/2014/10/28/react-v0.12.html#deprecations (14认同)