“未捕获的类型错误:React.createClass 不是函数"在 Render.js 文件中(电子应用程序

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 文件中(电子应用程序)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转
Rails/Javascript: How to inject rails variables into (very) simple javascript(Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript)
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)
Ordinals in words javascript(javascript中的序数)