Подтвердить что ты не робот

ReactJs CreateClass не является функцией

var React = require('react');

module.exports=React.createClass({
   render:function(){
   return(
        <div>
           <h1> the list  </h1>
        </div>   
   )}
})

Когда я запускаю вышеуказанный код, я получаю следующую ошибку:

app.js:4 Uncaught TypeError: React.createClass is not a function

Это из-за разницы в версии или опечатки?

package.json-I have included create-react-class as seen here but not in the bower.json file 


 {
    "dependencies": {
        "browser-sync": "^2.18.13",
        "browserify": "^14.4.0",
        "create-react-class": "^15.6.2",
        "ejs": "^2.5.7",
        "express": "^4.16.0",
        "gulp": "^3.9.1",
        "gulp-live-server": "0.0.31",
        "react": "^16.0.0",
        "reactify": "^1.1.1",
        "vinyl-source-stream": "^1.1.0"
      }
    }

gulpfile.js -Am Отсутствует какая-либо зависимость в этом файле

var gulp= require('gulp');
var LiveServer= require('gulp-live-server');
var browserSync=require('browser-sync');
var browserify = require('browserify');
var reactify= require('reactify');
var source = require('vinyl-source-stream');

gulp.task('live-server', function(){

    var server= new LiveServer('server/main.js');
    server.start();
})

gulp.task('bundle',function(){
  return browserify({
    entries:'app/main.jsx',
    debug:true,
  })
  .transform(reactify)
  .bundle()
  .pipe(source('app.js'))
  .pipe(gulp.dest('./.tmp'))

})


gulp.task('serve',['bundle','live-server'],function(){
    browserSync.init(null,{
        proxy: "http://localhost:7777",
        port:9001
    })
})

И мой main.jsx имеет следующие

 var React = require('react');
var createReactClass = require('create-react-class');

var GroceryItemList=require('./components/GroceryItemsList.jsx');

React.render(<GroceryItemList/>,app);

groceryitems.jsx имеет следующие

var React = require('react');
var createReactClass = require('create-react-class');
module.exports=React.createReactClass({

        render:function(){
            return(
                <div>
                    <h1> Grocery Listify </h1>
                </div>

            )

        }
})    

Когда я добавляю createReactClass, я получаю сообщение об ошибке: createReactClass не является функцией, и когда я добавляю синтаксис импорта и ES6, я получаю "незаконное замедление импорта", Спасибо,

Нэвин

4b9b3361

Ответ 1

Согласно документам, вам нужно получить пакет класса npm create реагировать. Из командной строки пути вашего файла проекта вам нужно выполнить npm install create-react-class --save, а затем изменить код следующим образом:

var React = require('react');
//You need this npm package to do createReactClass
var createReactClass = require('create-react-class');

    module.exports=createReactClass({
            render:function(){
                return(
                    <div>
                        <h1> the list  </h1>
                    </div>   
                )
            }

Вам также нужно React DOM для рендеринга таких компонентов:

npm install react react-dom
var ReactDOM = require('react-dom');
ReactDOM.render(<GroceryItemList/>,app);

Ответ 2

Это, безусловно, проблема с версией. Если вы начинаете новый, я предлагаю вам создать React component, расширив React.Component, а не используя React.createClass, так как он устарел от версии 16.0 и был перемещен в отдельный пакет 'create-react-class', поскольку @Dream_Cap также упоминает

Также используйте синтаксис ES6 для импорта. Вы изменили бы свой код на

import React from 'react';

export default class App extends React.Component {
    render(){
       return(
           <div>
               <h1> the list  </h1>
           </div>   
        )
     }
}

Ответ 3

Если вы получаете сообщение об ошибке, указывающее, что React.creatClass является функцией undefined, потому что более новые версии реагирования не поддерживают это.

Вы можете попробовать следующее:

Установите пакет NPM create-react-class:

npm install create-react-class -save-dev

Затем создайте новую переменную в переменной ReactDom:

var createReactclass= require ('create-react-class');

Теперь вместо использования React.createClass() для компонентов используйте var createReactClass()

Пример: Замените это:

var TodoComponent = React.createClass({render: function() {       возвращение (<h1 > Helloooo </h1 > ); }});

При этом:

var TodoComponent = createReactClass ({render: function() {       возвращение (<h1 > Helloooo </h1 > ); }});

Ответ 4

Спасибо за помощь. Вот как выглядит последний ответ: 1) использовать реакцию-dom для рендеринга

 var ReactDOM = require('react-dom');
  var List=require('./components/List.jsx');
  ReactDOM.render(<List/>,app);

2) используйте create-react-class (не реагировать) и экспортируйте его module.exports= createReactClass({.... вместо module.exports=React.createReactClass (это дает ошибку "createReactClass" не является функцией

Еще раз спасибо!

Ответ 5

Новые предупреждения об устаревании от React v15.5. 0+

Самое большое изменение заключается в том, что мы извлекли React.PropTypes и React.createClass в их собственные пакеты. Оба они по-прежнему доступны через основной объект React, но использование любого из них приведет к одноразовому выводу предупреждения об устаревании на консоль в режиме разработки. Это позволит в будущем оптимизировать размер кода.

Миграция из React.createClass

Когда React был первоначально выпущен, не было никакого идиоматического способа создания классов в JavaScript, поэтому мы предоставили свой собственный: React.createClass.

Позже классы были добавлены к языку как часть ES2015, поэтому мы добавили возможность создавать компоненты React с использованием классов JavaScript. Наряду с функциональными компонентами классы JavaScript теперь являются предпочтительным способом создания компонентов в React.

Для существующих компонентов createClass мы рекомендуем перенести их в классы JavaScript. Однако, если у вас есть компоненты, основанные на mixins, преобразование в классы может быть нецелесообразным. Если это так, create-react-class доступен на npm в качестве замены:

// Before (15.4 and below)
var React = require('react');

var Component = React.createClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

// After (15.5)
var React = require('react');
var createReactClass = require('create-react-class');

var Component = createReactClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

Ваши компоненты будут продолжать работать так же, как и раньше.

Если вы заинтересованы в использовании новых классов JavaScript, я предлагаю вам взглянуть здесь.

Но для быстрого доступа я включу здесь несколько строк:

Самый простой способ определить компонент - написать функцию JavaScript:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Эта функция является допустимым компонентом React, поскольку она принимает один аргумент объекта props (который обозначает свойства) с данными и возвращает элемент React. Мы называем такие компоненты functional потому что они буквально являются функциями JavaScript.

Вы также можете использовать класс ES6 для определения компонента:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Вышеуказанные два компонента эквивалентны с точки зрения Reacts.

Ответ 6

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const App = function(){};
App.prototype = Object.create(Component.prototype);
App.prototype.render = function(){
     return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
     )
   }
export default App;

Таким образом, вы можете избежать ключевого слова класса

Ответ 7

React.createClass не указан в обновленной документации. Вы должны перейти на createComponent с классом ECMA6.

Ответ 8

Попробуйте сначала установить npm, возможно, ваши зависимости в package.json установлены не полностью.