ReactJs CreateClass가 함수가 아닙니다.

ReactJs CreateClass가 함수가 아닙니다.

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

goodytems.goodx에는 다음과 같은 것이 있습니다.

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 구문을 추가하면 '불법 Import 감속'이 표시됩니다.감사합니다.

나빈

이것은 확실히 버전 문제입니다. 새로 시작하는 경우,React component연장함으로써React.Component사용하는 것보다React.createClass버전이 폐지되었기 때문에16.0이후 다른 패키지로 이동되었습니다.'create-react-class'@Dream_Cap도 언급했듯이

Import에는 ES6 구문을 사용합니다.코드를 다음과 같이 수정합니다.

import React from 'react';

export default class App extends React.Component {
    render(){
       return(
           <div>
               <h1> the list  </h1>
           </div>   
        )
     }
}

문서에 따르면 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.creatClass정의되지 않은 함수입니다.이는 React의 새 버전이 이를 지원하지 않기 때문입니다.

다음 단계를 시도해 볼 수 있습니다.

를 인스톨 합니다.create-react-classnpm 패키지:

npm install --save-dev create-react-class

그런 다음 아래 새 변수를 만듭니다.ReactDom변수:

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

를 사용하는 대신해서React.createClass()컴포넌트에는createReactClass()변화.

예: 치환:

var TodoComponent = React.createClass({
    render: function() {
        return(`<h1>`Helloooo`</h1>`);
    }
});

이것으로:

var TodoComponent = createReactClass({
    render: function() {
        return(`<h1>`Helloooo`</h1>`);
    }
});

도와주셔서 감사합니다.최종답변은 다음과 같습니다.1) 리액트돔을 사용하여 렌더링합니다.

 var ReactDOM = require('react-dom');
  var List=require('./components/List.jsx');
  ReactDOM.render(<List/>,app);

2) create-dispect-class (반응하지 않음)를 사용하여 내보냅니다.module.exports= createReactClass({…대신module.exports=React.createReactClass(이것에 의해, 「createReactClass」는 함수가 아닙니다.

다시 한 번 감사드립니다!'

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const App = function(){};
App.prototype = Object.create(Component.prototype);
App.prototype.render = function(){
     return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
     )
   }
export default App;

이렇게 하면 Class 키워드를 피할 수 있습니다.

React.createClass가 업데이트된 문서에 나열되지 않았습니다. ECMA6 클래스가 있는 createComponent를 선택해야 합니다.

먼저 npm 설치를 시도합니다.패키지 내의 devendency가 원인일 수 있습니다.json이 완전히 설치되지 않았습니다.

언급URL : https://stackoverflow.com/questions/46482433/reactjs-createclass-is-not-a-function