ReactJs 的 CreateClass 不是一个函数。

Question

ReactJs 的 CreateClass 不是一个函数。

64

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不是一个函数，当我添加导入和ES6语法时，会出现“非法的导入声明”错误。谢谢。

- Naveen DINUSHKA

尝试导出一个未命名的React组件会有问题吗？顺便说一句，将来最好使用更新且得到很好支持的ES6类语法。 - Andrew

我曾经这样做，结果我的浏览器完全卡住了...很奇怪... - Felipe

7个回答

66

根据文档，您需要获取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

1

我在控制台上看到了这个错误：“createReactClass”不是一个函数。 - Naveen DINUSHKA

你是否在命令行中执行了“npm install create-react-class --save”以安装该包？ - Dream_Cap

如果我们使用module.exports=createReactClass，它不会出现错误createReactClass' is not a function。 - Naveen DINUSHKA

我仍然收到一个错误... 基本上在控制台中我得到了类似于函数的内容，比如说：Greeter没有被声明...很奇怪... - Felipe

我遇到了同样的错误，但是在运行npm install create-react-class之后，现在我在服务器端得到了一个错误

node_modules/client-sessions/lib/client-sessions.js:259   var components = content.split(".");                            ^ TypeError: Cannot read property 'split' of undefined     at Object.decode (.../project/node_modules/client-sessions/lib/client-sessions.js:259:28)     at Namespace.io.sockets.on.socket (.../project/server.js:62:27) ...[nodemon] app crashed - waiting for file changes before starting...

我不明白发生了什么。无论我怎么做都会出现这种情况。 - John

这绝对是最好的答案。 - Droid Chris

21

如果您收到一个错误，指出React.creatClass是未定义的函数，那是因为更新版本的React不支持它。

您可以尝试以下步骤。

安装create-react-class npm包:

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

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

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

现在，不再使用React.createClass()创建组件，而是使用createReactClass()变量。

例如：替换为：

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

通过这个：

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

- Chandra Agarwala

嗨，我也遇到了同样的问题，但现在我面临着“ReferenceError: require未定义”的问题。 - Sarz

3

感谢所有的帮助。这就是最终答案的样子： 1) 使用react-dom进行渲染。

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

2) 使用create-react-class（而不是react）并导出它'module.exports= createReactClass({....，而不是module.exports=React.createReactClass （这会出现错误'createReactClass'不是函数）

再次感谢大家！'

- Naveen DINUSHKA

1

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

0

首先尝试运行 npm install 命令，可能是因为您的 package.json 文件中的依赖项没有完全安装。

- zero8

0

React.createClass在更新的文档中没有列出，您必须使用ECMA6类去创建组件

- Ramkumar Khubchandani

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shubham Khatri · Accepted Answer

这肯定是一个版本问题，如果你是新开始的话，我建议你通过继承React.Component创建一个React组件，而不是使用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>   
        )
     }
}