ReactJs CreateClass nie jest funkcją

Question

var React = require('react'); 

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

Kiedy uruchomić powyższy kod pojawia się następujący błąd:

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

Czy to z powodu różnicy wersji lub literówka?

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 I brakuje jakiegoś uzależnienia w tym pliku

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

A moja main.jsx ma następującą

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

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

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

się groceryitems.jsx ma następującą

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

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

      ) 

     } 
})  

Po dodaniu createReactClass pojawia się błąd: createReactClass nie jest funkcją i kiedy dodać składni import i ES6 dostaję „nielegalny import wyhamowanie” Dziękuję

Naveen

Answer 1

Per na documents, trzeba uzyskać npm tworzyć reagować pakietem klasowym. Z linii poleceń ścieżkę pliku Twojego projektu, trzeba zrobić „npm zainstalować create reagują-klasę flagą --save”, a następnie zmodyfikować kod tak:

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

też potrzeba React DOM do uczynienia elementy takie jak ten:

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

Answer 2

jest to z pewnością problem wersja Jeśli zaczynają świeże, chciałbym zaproponować Ci stworzyć React component rozszerzając React.Component zamiast używać React.createClass ponieważ jego przestarzałe od wersji 16.0 roku i został przeniesiony do oddzielnego pakietu 'create-react-class' jako @Dream_Cap als o wspomnieć o

Przejdź również ze składnią ES6 dla importów. Można by zmodyfikować kod do

import React from 'react'; 

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

Answer 3

Dzięki za wszelką pomoc .To jest jak ostateczna odpowiedź wygląda następująco: 1) używać reagowania-dom do renderowania

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

2) użytkowania Stwórz reagują -class (nie reaguje) i wyeksportować go „module.exports= createReactClass({ .... zamiast module.exports=React.createReactClass (to daje błąd«createReactClass»nie jest funkcją

Dziękuję wszystkim jeszcze raz! ”

Answer 4

Jeśli otrzymujesz Error z informacją, że React.creatClass jest niezdefiniowaną funkcją, to dlatego, że nowsze wersje reagowania nie obsługują tej funkcji.

można spróbować poniżej:

Install KMP tworzyć reagują klasy pakiet:

npm install create-react-class --save-dev

następnie utworzyć nową zmienną pod zmienną ReactDom:

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

Teraz zamiast użycia React.createClass() dla komponentów użyj var createReactClass()

Przykład: Wymień to:

var TodoComponent = React.createClass({ render:function(){ return(<h1> Helloooo </h1>); } });

z tym:

var TodoComponent = createReactClass({ render:function(){ return(<h1> Helloooo </h1>); } });