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

Я пытаюсь подключиться к моему приложению. Это приложение для рельсов, использующее рельсы-реакцию (хотя я не думаю, что это часть проблемы). Я в настоящее время использую очень простую установку 1 компонент:Ошибка с базовым примером React: Uncaught 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') 
);

Однако хром приподняв «» неперехваченного TypeError: не определен не является функция «» в Render.react() вызов, который она показывает между «(» и «CommentBox (нуль)»

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

источник

2014-10-29 Laurie Young

убедитесь у вас есть последние версия реакции, которая должна быть v0.12.0. Если у вас есть более старые версии, вы должны использовать теперь амортизированный 'React.renderComponent' как @jsanchez, предложенный ниже в ответах – trekforever

Я не очень хорошо знаком с Реагировать, но похоже, что вы должны использовать 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

Вы должны обновить до последней Реагировать библиотеки.

Некоторых учебники были обновлены, чтобы использовать 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

После 0,133.x Реакция перемещена React.renderComponent() на React.render().

источник

2015-09-28 11:43:59

После 0.14 React переехал в ReactDOM.render(), так что если вы обновляете Реагируйте, код должен быть:

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

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

источник

2015-11-23 20:49:57 ivn

Это правильный ответ для меня. Я использую v0.15 –

Я использую подобное, но получаю ошибку. не могли бы вы исправить меня ReactDOM.render (, document.getElementById ('Ishim')); –

@IshimdarAhamad сложно помочь на основе вашего комментария. Может быть, вы не импортировали ReactDOM в проект? Недостаточно импортировать React. 'import ReactDOM from 'response-dom';' – ivn

Скачать последнюю Реагировать Starter Kit ->https://facebook.github.io/react/downloads.html
Использование react.js и реагируют-dom.js файлы в папку сборки.
Вместо использования «текст/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'));

К (Working):

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. Если вы «импортируете ReactDOM из« response-dom »;', то вам придется использовать 'ReactDOM.render (Router, document.getElementById ('приложение'));' Проверить https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Statement/import для получения дополнительной информации. – ivn

Для тех, кто не знаком с ES6, не забудьте использовать именно переменную {render}. Потому что вы экспортируете только элемент «рендеринга» всего модуля. Если вы хотите использовать другое имя, вы можете использовать -> 'import {render as customRenderer} из 'response-dom';' –

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

ответ

Смежные вопросы