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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/46556011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:29:49  来源:igfitidea点击:

"Uncaught TypeError: React.createClass is not a function" in Render.js file (electron app)

javascriptelectronjsxpackage.jsonreact-dom

提问by Tavem

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

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

This is my Render.js File

这是我的 Render.js 文件

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

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)

这是 html 文件(希望替换 WPM ...正在加载)(我的实际文件中确实缺少最后一个 html 标签)

> <!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>

This is my package.json

这是我的 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"
  }
}

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

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

I have uninstalled and reinstalled both react and react-dom

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

not sure what else I am missing

不知道我还缺少什么

just keep getting

只是继续得到

C:\Users\user\Desktop\ElectronTesting\process\js\fake_6052bf8b.js:8 
Uncaught TypeError: React.createClass is not a function

my render.js file is found at ElectronTesting\process\js\render.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)

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

Thanks for any and all help.

感谢您的任何帮助。

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

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

回答by sbr

React removed createClassfrom version 16. You can use create-react-classto migrate easily as shown in react documentation.

ReactcreateClass从版本 16 中删除。您可以使用create-react-class来轻松迁移,如 react 文档中所示。

// 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 />;
  }
});

read more about this https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass

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

回答by Francis Tito

export default class App extends React.Component{
    render() {
        return(
           <h1>its works</h1>
        );
    }
};

this works for me, checkout this ReactJs CreateClass is not a functionthus its by exports React.component instead of using React.createClass

这对我有用,检查这个ReactJs CreateClass 不是一个函数,因此它通过导出 React.component 而不是使用 React.createClass

回答by Sudabe-Neirizi

In the latest version of React, you will notice that React.createClass was removed from the library. One of the biggest changes is that you can create React components using JavaScript classes.

在最新版本的 React 中,您会注意到 React.createClass 已从库中删除。最大的变化之一是您可以使用 JavaScript 类创建 React 组件。