Всем привет!
Смотрел уроки по React: Ссылка на уроки
Дошел до обработки событий компонента
Воспроизвел как в уроке. Через webpack собрал сборку. При попытке удалить div через кнопку UnMount получил ошибку:
Uncaught ReferenceError: App is not defined
Посмотрел собранный webpack'ом js файл.
unmountComponent: function (safely) {
if (!this._renderedComponent) {
return;
}
var inst = this._instance;
if (App.componentWillUnmount && !inst._calledComponentWillUnmount) {
inst._calledComponentWillUnmount = true;
if (safely) {
var name = this.getName() + '.componentWillUnmount()';
ReactErrorUtils.invokeGuardedCallback(name, App.componentWillUnmount.bind(inst));
} else {
if (process.env.NODE_ENV !== 'production') {
measureLifeCyclePerf(function () {
return App.componentWillUnmount();
}, this._debugID, 'componentWillUnmount');
} else {
App.componentWillUnmount();
}
}
}
В нем есть переменная App, но она ни в функции, ни глобально не объявлена. Заменил на inst, проблема решилась.
Конфигурационный файл webpack:
module.exports = {
context: __dirname + '/frontend',
entry: './main.jsx',
output: { path: __dirname + "/public", filename: 'build.js' },
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react',['es2015', { modules: false }]]
}
}
]
},
};
Просьба подсказать, в чем может быть ошибка. Ссылка на весь проект: ссылка
Код React:
app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Main extends React.Component {
constructor() {
super();
this.state = {
val: 0
};
this.update = this.update.bind(this);
}
update(){
this.setState({val: this.state.val + 1})
}
render(){
console.log('render');
return <button onClick={this.update}>{this.state.val}</button>;
}
componentWillMount() {
console.log('componentWillMount');
}
componentWillUnmount() {
console.log(`componentWillUnmount`);
}
componentDidMount() {
console.log('componentDidMount');
}
}
class Wrapper extends React.Component {
mount() {
ReactDOM.render(<Main/>, document.getElementById("a"));
}
unmount() {
ReactDOM.unmountComponentAtNode(document.getElementById("a"));
}
render() {
return(
<div>
<button onClick={this.mount.bind(this)}>Mount</button>
<button onClick={this.unmount.bind(this)}>UnMount</button>
<div id="a"></div>
</div>
);
}
}
export default Wrapper;
main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Wrapper from './app.jsx';
ReactDOM.render(<Wrapper />,document.getElementById('root'));