反応ブートストラップをレンダリングできませんModalTrigger

Question

私はReactJSを初めて使い、別のコンポーネントでモーダルの表示/非表示を目的としたModalTriggerのレンダリングに問題があります。私が使った定型文は、反応スターターキットです。

"不変の違反：要素の種類が無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）がありますが、未定義です。レンダリング方法が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

それはここに..... 1が戻る前に、文字列にコンポーネントを変換することになっているとは考えにくいコードです推奨されません。そして、もう一つの解決策、つまりモーダルロジックに<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>