“未捕获的类型错误:React.createClass 不是函数&qu

quot;Uncaught TypeError: React.createClass is not a functionquot; in Render.js file (electron app)(“未捕获的类型错误:React.createClass 不是函数在 Render.js 文件中(电子应用程序))
本文介绍了“未捕获的类型错误:React.createClass 不是函数"在 Render.js 文件中(电子应用程序)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是 react.js 的新手,我试图让这段代码用 MainInterface 变量中返回的任何内容替换电子应用程序内的 html 文件中的一行

I'm new to react.js and I am trying to get this code to replace one line in an html file inside an electron app with whatever is in return inside the MainInterface variable

这是我的 Render.js 文件

This is my Render.js File

var React = require('react');
var ReactDOM = require('react-dom');

var $ = jQuery = require('jquery');
var bootstrap = require('bootstrap');

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

var MainInterface = React.createClass({
  render: function() {
    return(
      <h1>SUCCESSSSSSSSSSS</h1>
  );
}//render
});//MainInterface

ReactDOM.render(
  <MainInterface />,
  document.getElementById('projects')
);//render

这是 html 文件(正在寻找替换 WPM ...正在加载)(我的实际文件中确实有最后一个 html 标记)

This is the html file (looking to replace WPM ... loading) (I do have the last html tag that is missing here in my actual file)

> <!DOCTYPE html> <html lang ="en">   <head>
>     <meta charset="utf-8">
>     <meta name ="viewport" content="width=device-width, initial-scale=1.0">
>     <meta http-equiv="X-UA-Compatible" content="ie=edge">
>     <link rel="stylesheet" href="css/app.css">
>     <title>Project Manager</title>   </head>   <body>   <div claa="main">
>     <div class="page" id="projectratings">
>       <div id="projects">
>         <h2>WPM ... loading</h2>
>       </div>
>     </div>   </div> <script src="js/render.js"></script>   </body>

这是我的 package.json

This is my package.json

{
  "name": "ETest",
  "version": "1.0.0",
  "main": "app/main.js",
  "devDependencies": {
    "create-react-class": "^15.6.2",
    "electron": "^1.7.8",
    "electron-packager": "^9.1.0",
    "gulp": "^3.9.1",
    "gulp-browserify": "^0.5.1",
    "gulp-concat-css": "^2.3.0",
    "gulp-react": "^3.1.0",
    "gulp-run": "^1.7.1",
    "react": "^16.0.0",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.0.0",
    "reactify": "^1.1.1"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "electron-reload": "^1.2.2",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4"
  }
}

我已尝试安装 creat-react-class 并使用它(如在 render.js 文件中注释掉的行中所见)

I have tried installing creat-react-class and using that (as seen in the line that is commented out in the render.js file)

我已经卸载并重新安装了 react 和 react-dom

I have uninstalled and reinstalled both react and react-dom

不知道我还缺少什么

继续努力

C:UsersuserDesktopElectronTestingprocessjsfake_6052bf8b.js:8 
Uncaught TypeError: React.createClass is not a function

我的 render.js 文件位于 ElectronTestingprocessjs ender.js不知道为什么它指向 fake_6052bf8b.js 我一直假设这是某种类型的临时文件(如果我错了请纠正我)

my render.js file is found at ElectronTestingprocessjs ender.js not sure why it points to fake_6052bf8b.js I've been assuming that's some type of temp file (please correct me if I am wrong)

感谢您的任何帮助.

**EDIT 是的,只是一个简单的错误,忘记将 React.createClass 替换为 createReactClass,感谢代码示例让我终于看到它!

**EDIT yep just a simple mistake, forgot to replace React.createClass with createReactClass, thanks for the code example that made me finally see it!!

推荐答案

React 从版本 16 中删除了 createClass.您可以使用 create-react-class 轻松迁移,如 react 文档中所示.

React removed createClass from version 16. You can use create-react-class to migrate easily as shown in react documentation.

// Before (15.4 and below)
var React = require('react');

var Component = React.createClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

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

var Component = createReactClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

阅读更多关于此https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass

这篇关于“未捕获的类型错误:React.createClass 不是函数"在 Render.js 文件中(电子应用程序)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)