ReactJs CreateClass 不是一个函数 [英] ReactJs CreateClass is not a function

问题描述

var React = require('react');module.exports=React.createClass({渲染:函数(){返回(
<h1>列表 </h1></div>)}})

当我运行上述代码时，出现以下错误:

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

这是因为版本不同还是拼写错误?

package.json-我已经包含了 create-react-class 如此处所示，但未包含在 bower.json 文件中{依赖":{"浏览器同步": "^2.18.13","浏览": "^14.4.0",创建反应类":^15.6.2"，"ejs": "^2.5.7","快递": "^4.16.0","吞咽": "^3.9.1","gulp-live-server": "0.0.31",反应":^16.0.0"，反应":^1.1.1"，乙烯基源流":^1.1.0"}}

gulpfile.js - 我在这个文件中是否缺少一些依赖项

var gulp= require('gulp');var LiveServer=require('gulp-live-server');var browserSync=require('浏览器同步');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(){返回浏览器化({条目:'app/main.jsx',调试:真，}).transform(反应).捆().pipe(source('app.js')).pipe(gulp.dest('./.tmp'))})gulp.task('serve',['bundle','live-server'],function(){browserSync.init(null,{代理:http://localhost:7777"，端口: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({渲染:函数(){返回(
<h1>杂货清单 </h1></div>)}})

添加 createReactClass 时出现错误:createReactClass 不是函数，添加导入和 ES6 语法时出现非法导入减速"谢谢，

纳温

解决方案

根据 documents，需要获取 npm create react 类包.从项目文件路径的命令行中，您需要执行 npm install create-react-class --save，然后像这样修改代码:

var React = require('react');//你需要这个 npm 包来做 createReactClassvar createReactClass = require('create-react-class');module.exports=createReactClass({渲染:函数(){返回(
<h1>列表 </h1></div>)}

你还需要 React DOM 来渲染组件，如下所示:

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

var React = require('react');

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

When I run the above code I get the following error :

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

Is this because of a version difference or a typo ?

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 missing some dependency in this file

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

And my main.jsx has the following

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

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

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

the groceryitems.jsx has the following

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

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

            )

        }
})    

When I add the createReactClass I get an error: createReactClass is not a function and when I add import and ES6 syntax I get 'illegal import deceleration ' Thank you,

Naveen

解决方案

Per the documents, you need to get the npm create react class package. From the command line of your project's file path, you need to do npm install create-react-class --save, and then modify the code like this:

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

You also need React DOM to render the components like this:

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

这篇关于ReactJs CreateClass 不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！