Ошибка с базовым примером React: Uncaught TypeError: undefined не является функцией

Я пытаюсь подключиться к моему приложению. Это приложение для рельсов, использующее rails-react (хотя я не думаю, что часть проблемы). В настоящее время я использую очень простую 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 преобразует myaction_admin.js.jsx в response_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')
);

Однако хром поднимает "Uncaught TypeError: undefined не является функцией" в вызове Render.react(), который он показывает между "(" и "CommentBox (null)"

Может кто-нибудь сказать мне, что я делаю неправильно?

Ответы

Ответ 1

После 0,14 React переместился на ReactDOM.render(), поэтому, если вы обновите React, ваш код должен быть:

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

Но не забудьте включить в проект как react.js, так и react-dom.js, так как они теперь разделены.

Ответ 2

Вы должны обновиться до последней библиотеки React.

Некоторые учебные пособия были обновлены для использования React.render() вместо устаревших React.renderComponent(), но авторы по-прежнему предоставляют ссылки на более старые версии или React, которые не имеют новейшего метода render().

Ответ 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/

Ответ 4

После того, как 0.13.x React переместил React.renderComponent() в React.render().

Ответ 5

По неизвестным мне причинам мне пришлось обернуть мой в {}

Итак, из:

import React from "react";
import render from "react-dom";
import Router from "./Router";

render(Router, document.getElementById ('app'));

To (Работа):

import React from "react";
import {render} from "react-dom";
import Router from "./Router";

render(Router, document.getElementById ('app'));

Ответ 6

React.render был представлен в версии 0.12, как описано здесь: https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

Чтобы исправить обновление проблемы до этой версии или выше. На момент написания последней версии 0.13.3.

Ответ 7

Здесь полный script, ссылающийся на ваш исходный код.

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

Ответ 8

Для новичков ошибка (тип/ undefined равна undefined) также может отображаться из-за размещения блока кода React.render.

Он должен быть размещен после создания компонентов, предпочтительно внизу.