Не могу отреагировать - начальная загрузка ModalTrigger

Question

Я новичок в ReactJS и у меня возникли проблемы с рендерингом ModalTrigger, который предназначен для показа / скрытия модального режима в отдельном компоненте. Образец, который я использовал, является комплектом реактивного стартера.

Возвращаемая ошибка: "Нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Проверьте метод визуализации MenuButton".

Кажется маловероятным, что кто-то должен преобразовать компонент в строку перед возвратом..... Вот код:

import React, {PropTypes, Component} from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import ModalTrigger from 'react-bootstrap';
import Menu from '../Menu';
import s from './MenuButton.css';

class MenuButton extends Component {

static getInitialState() {return {isMenuOpen: false}};

constructor() {
    super();
    this.state = {isMenuOpen: false};
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    if(this.state) {
        this.setState({isMenuOpen: !(this.state.isMenuOpen)});
    }
}

render() {
    var btnImage = require('./menuButton.svg');
    var show = {show: this.state};
    console.log('menu ' + <Menu/>);
    return (
        <ModalTrigger modal={<Menu />}>
            <div className={s.menuBtn}>
                <a onClick={this.handleClick.bind(this)}>
                    <img className={s.menuBtnImg} src={btnImage}/> {show} {this.state.isMenuOpen ? 'Stäng meny' : 'Meny'}
                </a>
            </div>
        </ModalTrigger>
    );
}
}
export default withStyles(s)(MenuButton);

И тогда модал:

import React, { Component } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Menu.css';

class Menu extends Component {
static getInitialState() {return {show: false}};

static showModal(){
    this.setState({show: true});
};

static hideModal() {
    this.setState({show: false});
}

render() {
    if (!this.state.show) {
        return <span/>;
    }
    return (
        <Modal {...this.props} title='Meny' animation={true}>
            <div className='modal-body'>
                <ul>
                    <a href="#main"><li>Startsida</li></a>
                    <a href="#omoss"><li>Om oss </li></a>
                    <a href="#reminiscens"><li>Reminiscens</li></a>
                    <a href="#appen"><li>Appen</li></a>
                    <a href="#stories"><li>Berättelser</li></a>
                    <a href="#nyheter"><li>Nyheter om projektet</li></a>
                    <a href="#englishinfo"><li>Info in English</li></a>
                </ul>
            </div>
        </Modal>
    );
}
}
export default withStyles(s)(Menu);

Answer 1

ModalTrigger устарела. И кажется, что вы уже начали работать над альтернативным решением: использование состояния компонента вместо <ModalTrigger/> для модальной логики. Вот быстрый пример. Узнайте больше об этом в документации.

const Modal = ReactBootstrap.Modal;

class Menu extends React.Component {
  constructor() {
    super();
    this.state = { isMenuOpen: false };
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleOpen() {
    this.setState({ isMenuOpen: true });
  }

  handleClose() {
    this.setState({ isMenuOpen: false });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleOpen}>Trigger Menu</button>
        <Modal show={this.state.isMenuOpen} onHide={this.handleClose}>
          <ul>
            <li>This</li>
            <li>is</li>
            <li>the</li>
            <li>menu!</li>
          </ul>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<Menu/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.5/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<div id="View"></div>