Question

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

我的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不是函数'，它在“（”和“CommentBox（null）”之间显示

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

Answer 1

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

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

但请务必在项目中同时包含react.js和react-dom.js，因为这些内容现已分开。

Answer 2

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

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

Answer 3

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

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

enter image description here

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

您可以在此处看到它：http://jsfiddle.net/popksfb0/

Answer 4

在0.13.x之后，React将/foo/author-properties移至@RequestMapping("/{all:\\*}/author-properties") public String allProperties() { }。

Answer 5

由于我不知道的原因，我必须在{}

中包裹我的

所以来自：

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

Answer 6

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

将问题升级到该版本或更高版本。在撰写本文时，最新版本为0.13.3。

Answer 7

下载最新的React Starter Kit - ＆gt; https://facebook.github.io/react/downloads.html
在构建文件夹中使用 react.js 和 react-dom.js 文件。
而不是使用“text / jsx”代替使用“text / babel”，引用这个缩小的库 - ＆gt; 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>

Answer 8

对于初学者，由于React.render代码块的放置，错误（类型/未定义未定义）也可能会显示。

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

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

8 个答案: