无法渲染 react-bootstrap ModalTrigger

Question

我是 ReactJS 的新手，在渲染一个用于在单独组件中显示/隐藏模式的 ModalTrigger 时遇到问题。我使用的样板是 react-starter-kit。

返回的错误是：“Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for complex components) but got: 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/> 作为模态逻辑。这是一个简单的例子。在documentation 中了解更多信息。

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>