ReactJs CreateClass 不是一个函数

Question

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

杂货项目.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 语法时出现“非法导入减速” 谢谢，

纳文

原文由 Naveen DINUSHKA 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据 文档，您需要获取 npm create react 类包。从项目文件路径的命令行中，您需要执行 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 3.0 许可协议