与反应bootstrap模态卡住工作

我很难理解我做错了什么。基本上我只想得到一个模式，当我点击一个div时显示。然而，什么也没有发生，除了这样的警告：与反应bootstrap模态卡住工作

警告：React.createElement：类型不能为空，未定义，布尔或数字。它应该是一个字符串（用于DOM元素）或ReactClass（用于复合组件）。

这里是其中模态会出现组分：

import React from 'react'; 
import {ModalTrigger} from 'react-bootstrap'; 
import MyModal from './MyModal'; 

var PostTitle = React.createClass({ 
    openPost : function() {  
     var postData = this.props.postData; 
     console.log("clicked - openPost"); 
     return (
     <ModalTrigger modal={<MyModal/>}> 
     </ModalTrigger> 
     ) 
    }, 
    render : function() { 
     var postData = this.props.postData; 
     return(
      <div className="item" onClick={this.openPost}> 
       <div className="well"> 
        <img src={postData.image}/> 
        <p>{postData.title}</p> 
       </div> 
      </div> 
     ) 
    } 
}); 

export default PostTitle;

这里是MyModal成分：

import React from 'react'; 
import {Modal} from 'react-bootstrap'; 

var MyModal = React.createClass({ 

    render : function() { 
     return (
      <Modal {...this.props}> 
      <ul className="list-group"> 
       <li className="list-group-item">Cras justo odio</li> 
       <li className="list-group-item">Dapibus ac facilisis in</li> 
       <li className="list-group-item">Morbi leo risus</li> 
       <li className="list-group-item">Porta ac consectetur ac</li> 
       <li className="list-group-item">Vestibulum at eros</li> 
      </ul> 
     </Modal> 
     ) 
    } 
}); 

export default MyModal;

来源

2015-12-23 user3152131

是否有任何显示ModalTrigger的文档？我期待看到，但我没有看到有关该组件的任何内容。 – bmartin

ModalTrigger为deprecated on July 2015。

您可以在组件状态下存储模态是否必须显示。当单击元素时，您将this.state.show设置为true。这将显示模式。一旦关闭/隐藏模式，您将this.state.show设置为false，模式将不会显示。

var PostTitle = React.createClass({ 
    getInitialState() { 
     return {show: false}; 
    }, 
    openPost : function() {  
     var postData = this.props.postData; 
     console.log("clicked - openPost"); 
     this.setState({show: true}); 
    }, 
    closePost: function() { 
     this.setState({show: false}); 
    }, 
    render : function() { 
     var postData = this.props.postData; 
     return(
      <div className="item" onClick={this.openPost}> 
       <MyModal show={this.state.show} onHide={this.closePost} /> 
       <div className="well"> 
        <img src={postData.image}/> 
        <p>{postData.title}</p> 
       </div> 
      </div> 
     ) 
    } 
});

来源

2015-12-23 23:37:42 dreyescat

与反应bootstrap模态卡住工作

回答

相关问题