无法呈现react-bootstrap ModalTrigger

Question

我是ReactJS的新手，并且无法渲染用于在单独组件中显示/隐藏模式的ModalTrigger。我使用的样板是react-starter-kit。返回的错误是：“不变的违规：元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件），但得到：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>