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

格尔普菲尔.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
    })
})

还有我的主菜.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不是一个函数,当我添加import和ES6语法时,我得到"非法导入减速"

纳文

推荐答案

根据documents,您需要获得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);

Reactjs相关问答推荐

构建next.js项目时状态不变,但在dev服务器中

如何创建react router v6的自定义子路由?

关于同一位置的不同组件实例的react S规则被视为相同组件

使用Reaction-Hook-Form时未激发React.js onBlur事件

在构建或部署Reaction应用程序时出错

点击页脚链接时,如何更改ReactJS导航栏中的活动菜单项(样式为Tailwind CSS)?

如何动态地改变<; Select >;React和Tailwind元素?

react 本机屏幕转换

当 URL 与我声明的任何路由都不匹配时,如何使用不会重定向到错误页面的动态 URL? - react 路由 dom

在 reactJS 中导航时页面重新加载

无法访问 usefocusEffect 中 const 的更新状态

当 React 中的状态发生变化时如何停止重新加载谷歌 map ?

使用状态与复选框不同步

如何处理页面加载时发生的 reactjs 错误?

如何在 ChartJS 中操作 Y 轴

使用 Vite 的 React 中的路由无法正常工作(构建中)

在 React 中将路径与查询变量匹配

更新和删除功能不工作 Asp.net MVC React

使用 React.UseEffect 从 api 获取但我的清理返回不起作用

单击三个按钮之一后如何显示特定按钮的内容?单击其中一个按钮后应隐藏所有按钮