1

Всем привет!

Смотрел уроки по 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'));
4
  • Почему вы решили, что ошибка - именно в webpack? Покажите исходники до их обработки вебпаком. 13 фев 2017 в 13:01
  • Дополнил. Подозреваемый - webpack, потому что подключал библиотеку react в html, все работало корректно. Так же залезал в исходники метода unmountComponentAtNode, переменной App нет
    – kolynchick
    14 фев 2017 в 9:27
  • Вы приложили не тот файл. 14 фев 2017 в 9:44
  • На мой взгялд весьма странный способ манипулирования компонентом. Проще добавить значение в стейт(true, false) и по нему ориентироваться надо вообще рендерить этот компонент или нет. Менять стейт по нажатию на кнопку 16 фев 2017 в 12:06

1 ответ 1

0

Вероятно App - это компонент. Тогда у вас в начале кода должен быть его импорт, например: import App from './containers/AppContainer' Ну или смотря каким js вы пользуетесь. В render методе, вы его должны примонтировать, например так:

render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('app')
)

Тогда его можно будет и отмонтировать.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.