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 -Am Отсутствует какая-либо зависимость в этом файле
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);
groceryitems.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 не является функцией, и когда я добавляю синтаксис импорта и ES6, я получаю "незаконное замедление импорта",
Спасибо,
Нэвин
Ответы
Ответ 1
Согласно документам, вам нужно получить пакет класса npm create реагировать. Из командной строки пути вашего файла проекта вам нужно выполнить 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);
Ответ 2
Это, безусловно, проблема с версией. Если вы начинаете новый, я предлагаю вам создать React component
, расширив React.Component
, а не используя React.createClass
, так как он устарел от версии 16.0
и был перемещен в отдельный пакет 'create-react-class'
, поскольку @Dream_Cap также упоминает
Также используйте синтаксис ES6 для импорта. Вы изменили бы свой код на
import React from 'react';
export default class App extends React.Component {
render(){
return(
<div>
<h1> the list </h1>
</div>
)
}
}
Ответ 3
Если вы получаете сообщение об ошибке, указывающее, что React.creatClass является функцией undefined, потому что более новые версии реагирования не поддерживают это.
Вы можете попробовать следующее:
Установите пакет NPM create-react-class:
npm install create-react-class -save-dev
Затем создайте новую переменную в переменной ReactDom:
var createReactclass= require ('create-react-class');
Теперь вместо использования React.createClass() для компонентов используйте var createReactClass()
Пример:
Замените это:
var TodoComponent = React.createClass({render: function() { возвращение (<h1 >
Helloooo </h1 >
); }});
При этом:
var TodoComponent = createReactClass ({render: function() { возвращение (<h1 >
Helloooo </h1 >
); }});
Ответ 4
Спасибо за помощь. Вот как выглядит последний ответ:
1) использовать реакцию-dom для рендеринга
var ReactDOM = require('react-dom');
var List=require('./components/List.jsx');
ReactDOM.render(<List/>,app);
2) используйте create-react-class (не реагировать) и экспортируйте его module.exports= createReactClass({
.... вместо module.exports=React.createReactClass
(это дает ошибку "createReactClass" не является функцией
Еще раз спасибо!
Ответ 5
Новые предупреждения об устаревании от React v15.5. 0+
Самое большое изменение заключается в том, что мы извлекли React.PropTypes
и React.createClass в их собственные пакеты. Оба они по-прежнему доступны через основной объект React
, но использование любого из них приведет к одноразовому выводу предупреждения об устаревании на консоль в режиме разработки. Это позволит в будущем оптимизировать размер кода.
Миграция из React.createClass
Когда React был первоначально выпущен, не было никакого идиоматического способа создания классов в JavaScript, поэтому мы предоставили свой собственный: React.createClass
.
Позже классы были добавлены к языку как часть ES2015
, поэтому мы добавили возможность создавать компоненты React с использованием классов JavaScript. Наряду с функциональными компонентами классы JavaScript теперь являются предпочтительным способом создания компонентов в React.
Для существующих компонентов createClass
мы рекомендуем перенести их в классы JavaScript. Однако, если у вас есть компоненты, основанные на mixins
, преобразование в классы может быть нецелесообразным. Если это так, create-react-class
доступен на npm
в качестве замены:
// 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 />;
}
});
Ваши компоненты будут продолжать работать так же, как и раньше.
Если вы заинтересованы в использовании новых классов JavaScript, я предлагаю вам взглянуть здесь.
Но для быстрого доступа я включу здесь несколько строк:
Самый простой способ определить компонент - написать функцию JavaScript:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Эта функция является допустимым компонентом React, поскольку она принимает один аргумент объекта props
(который обозначает свойства) с данными и возвращает элемент React. Мы называем такие компоненты functional
потому что они буквально являются функциями JavaScript.
Вы также можете использовать класс ES6 для определения компонента:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Вышеуказанные два компонента эквивалентны с точки зрения Reacts.
Ответ 6
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;
Таким образом, вы можете избежать ключевого слова класса
Ответ 7
React.createClass не указан в обновленной документации. Вы должны перейти на createComponent с классом ECMA6.
Ответ 8
Попробуйте сначала установить npm, возможно, ваши зависимости в package.json установлены не полностью.