当前位置: 首页 > 面试题库 >

ReactJs CreateClass不是函数

邴兴为
2023-03-14
问题内容
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语法时,我得到了’非法进口减速’谢谢,

纳文


问题答案:

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


 类似资料:
  • 问题内容: 当我试图在React版本15.2.0中使用这两个函数时,我在代码中发现了一个问题,尽管如此,我找到了一种解决方法,但是我想知道是否有更好的解决方案。 因此,每当我尝试运行index.html文件时,都不会显示任何内容,但是控制台会出现第一个错误: React.render不是function 。我发现发生这种情况是因为新版本的React需要使用react-dom,即 现在问题已解决,但

  • 问题内容: 我正在为无法解决的错误而烦恼。我有以下内容; JSON格式 和下面的jQuery 但是我收到一个错误,认为map.data未定义为函数?看着它,我不知道什么是行不通的,因为我已将其从以前使用的代码复制到新项目中。唯一不同的是JSON源。上一个没有[]括号之前的部分。这是什么让我失望吗? 问题答案: 对象,在JavaScript没有方法,它只是为数组,。 因此,为了使您的代码正常工作,请

  • 问题内容: 我有这段代码可用于从Arduino接收数据,但我想将数据发送回Arduino并在客户端页面上获得响应。我添加了侦听功能,但是从客户端页面发送数据时却不断获取信息。 test.js 问题答案: 您的价值不是应有的价值。 通常的做事方式是这样的: 但是我猜你的价值是这样的: 那不是同一回事。那就是模块句柄。但是,当您这样做时: 然后,是一个socket.io实例。您可以将侦听器绑定到实例,

  • 问题内容: 我正在尝试使用来运行任何按钮的功能。我在Firebug中遇到错误 document.getElementByClass不是函数 这是我的代码: 问题答案: 您可能是想(然后从结果节点列表中获取第一项): 您可能仍然会收到错误 不是功能 但是,在较旧的浏览器中,如果需要支持那些较旧的浏览器,则可以提供后备实现。

  • 编辑:阅读问题末尾的部分! 我的服务代码: 在我的组件中,我有这个提交功能: 这里和这里都有类似的错误。答案总是包含rxjs函数,但是我这样做了,所以我不太确定,为什么会出现这个错误。 编辑: 因此,实际的问题不是这个函数,而是主应用程序中我的路线前缺少“/”。js文件。解决了这个问题之后,问题就消失了。

  • 问题内容: 我有以下组件,该组件维护在特定元素上触发事件时更新的状态,并且在更新状态时将其作为道具传递给另一个组件。我目前正在尝试为什么我得到以下错误“ this.setState不是函数”,它很可能没有绑定到正确的上下文。但是我不确定,我这样做正确吗? 编辑: 我只是意识到上下文会在“onreadyStateChange”函数时发生更改,所以我在searchGif中做了以下操作 问题答案: 您正

  • 问题内容: 我将Webpack与firebase和firebase-admin一起使用。 要安装firebase,我跑了 我正在使用导入Firebase, 我也试过 我试过了 根据网络入门指南中的建议 但是,当我尝试使用时,出现错误 console.js:32 TypeError:firebase.auth不是函数 当我使用调试器进行检查时,我发现它实际上没有功能: 如何使用webpack将aut

  • 问题内容: 我正在尝试将数据发布到在mLab上创建的数据库中,但出现此错误,但我不知道出了什么问题。我也阅读了有关此主题的先前询问的问题,但由于无法解决错误我是新来的。因此,我在这里发布了我要实现的代码,该代码取自本教程https://medium.freecodecamp.com/building- a-simple-node-js-api-in-under-30-minutes- a07ea9