坚持让 React bootstrap 模态正常工作

Question

我很难理解我做错了什么。基本上，我只想在单击 div 时显示一个模式。但是，除了这个警告之外没有任何反应：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

这是将出现模态的组件：

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;

Answer 1

ModalTrigger 是 deprecated on July 2015。

您可以在组件状态中存储是否必须显示模式。单击该元素时，您将 this.state.show 设置为 true。这将显示模态。一旦你 close/hide 模态，你将 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>
        )
    }
});

坚持让 React bootstrap 模态正常工作

Stuck with getting react bootstrap modal to work

javascript

reactjs

react-bootstrap