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-是我在此文件中缺少某些依赖项

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不是一个函数,当我添加import和ES6语法时,我得到了'非法进口减速'谢谢,

纳文

Naveen DINUSHKA asked 2020-01-21T11:50:35Z
7个解决方案
54 votes

这肯定是一个版本问题,如果您是重新开始,我建议您通过扩展React.Component而不是使用React.createClass来创建React component,因为它已从版本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>   
        )
     }
}
Shubham Khatri answered 2020-01-21T11:51:29Z
51 votes

根据文档,您需要获取npm create react class软件包。 在项目文件路径的命令行中,您需要执行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);
Dream_Cap answered 2020-01-21T11:51:04Z
17 votes

如果您收到一个错误消息,指出React.creatClass是未定义的函数,那是因为较新版本的react不支持该功能。

您可以尝试以下方法:

安装NPM create-react-class软件包:

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

然后在ReactDom变量下创建一个新变量:

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

现在,使用var createReactClass()代替组件使用React.createClass()

例:替换为:

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

有了这个:

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

Chandra Agarwala answered 2020-01-21T11:52:33Z
3 votes

感谢您的所有帮助。这就是最终的答案:1)使用react-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'不是一个函数

再次谢谢大家!'

Naveen DINUSHKA answered 2020-01-21T11:53:02Z
1 votes
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;

这样就可以避免使用Class关键字

user9610264 answered 2020-01-21T11:53:23Z
0 votes

React.createClass没有在更新的文档中列出,您必须使用带有ECMA6类的createComponent

Ramkumar Khubchandani answered 2020-01-21T11:53:43Z
0 votes

首先尝试npm install可能是您在package.json中的功能未完全安装。

zero8 answered 2020-01-21T11:54:03Z
translate from https://stackoverflow.com:/questions/46482433/reactjs-createclass-is-not-a-function