Почему при работе с react-popout вылетает ошибка?

214
11 марта 2017, 03:41

Использую данный плагин. Есть страница, на которой после клику по кнопке будет всплывать попаут. Прикрутить я его прикрутил и худо бедно открыть можно но есть проблема. Вот как я его использовал.Создал компонент:

var PopoutWindow = React.createClass({

    render: function () {
        var url = (this.props.url != null) ? this.props.url : "";
        var title = (this.props.title != null) ? this.props.title : "";

        if (this.props.isPoppedOut){
              return (
                <Popout url={url}
                        title={title}
                >
                </Popout>
              );
            } else {
              return (
                null
            );
        }
    }
});

Вот как записал его в рендере родительского компонента :

<PopoutWindow   url=''
                title='POPUP'
                isPoppedOut={this.state.isPoppedOut}
/>

Тут же ниже кнопка:

<button type="submit" href="javascript:void(0);" onClick={this.popupOpen} className="btn">
 Install
</button>

Метод popupOpen, который также обозначен в родителе:

popupOpen: function () {
        if(this.state.isPoppedOut) {
            this.setState({isPoppedOut: false});
        } else {
            this.setState({isPoppedOut: true});
        }
    },

По клику на кнопку хендлер срабатывает и появляется новое окно в браузере, однако в консоли он пишет ошибку:

Uncaught Error: ReactDOM.render(): Invalid component element.

Погуглил и увиделп охожие ошибки у людей в сети.Они связаны с неправильным пробросом в ReactDOM.render(), не совсем понял это. у меня рендерится в определенном контейнере все приложение сов сем своими компонентами. Этой штуке нужен отдельный контейнер для рендера? И еще небольшой вопрос касаемо закрытия. Подозреваю,что оно как-то реализовано иначе, чем у меня. Если кнопкой открыть окно, но закрыть его нажав мышкой по кнопке х на панели, то isPopedOut не перейдет в false и в дальнейшем,чтобы его открыть надо дважды кликнуть по моей кнопке.не совсем понял, как это реализовать нормально

Answer 1
<PopoutWindow   url=''
                title='POPUP'
                isPoppedOut={this.state.isPoppedOut}
/>

Здесь добавьте onClosing={this.popupOpen}(обработчик события закрытия окна) и добавить пустой <div> внутрь этого компонента.

READ ALSO
Парсинг JSON в JavaScript

Парсинг JSON в JavaScript

Добрый деньОписываю ситуацию: Нужно распарсить JSON с помощью JavaScript

485
Очистка $scope переменной в AngularJS

Очистка $scope переменной в AngularJS

Проблема заключается в том, что происходит утечка памятиПеременная содержит данные, при уходе со страницы я выполняю destroy

235
Изменить стиль с помощью JS

Изменить стиль с помощью JS

Есть менюПри клике оно выезжает вниз

260