33

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

我的 html 文件包含：

<body>
  <div id="content"></div>
  <script src="/assets/react.js?body=1"></script>
  <script src="/assets/react_admin.js?body=1"></script>
</body>

我可以看到 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')
);

然而 chrome 在 Render.react() 调用中引发了一个“未捕获的 TypeError: undefined is not a function”，它显示在“(”和“CommentBox(null)”之间

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

4

8 回答 8

67

在 0.14 React 之后移到ReactDOM.render()，所以如果你更新 React，你的代码应该是：

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

但是请确保在您的项目中包含react.js和react-dom.js，因为它们现在是分开的。

于 2015-11-23T20:49:57.103 回答
15

你应该更新到最新的 React 库。

一些教程被更新为使用React.render()而不是 deprecated React.renderComponent()，但作者仍然提供旧版本或 React 的链接，它们没有最新的render()方法。

于 2015-06-07T22:10:55.803 回答
4

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

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

在此处输入图像描述

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

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

于 2014-10-29T10:47:22.080 回答
2

由于我不知道的原因，我不得不把我的{}

所以从：

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-09T21:56:19.667 回答
2

在 0.13.x 之后，React 移动React.renderComponent()到React.render().

于 2015-09-28T11:43:59.183 回答
1

React.render 是在 0.12 版本中引入的，如下所述： https ://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

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

于 2015-07-14T08:32:25.560 回答
1

对于初学者，错误（type/undefined is undefined）也可能由于 React.render 代码块的放置而出现。

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

于 2015-07-09T11:08:28.023 回答
1
  1. 下载最新的 React Starter Kit -> https://facebook.github.io/react/downloads.html
  2. 在构建文件夹中使用react.js和react-dom.js文件。
  3. 而不是使用“text/jsx”，而是使用“text/babel”，引用这个缩小的库 - > 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-18T18:56:05.000 回答