Question

我很难理解我做错了什么。基本上我只是想在我点击div时显示一个模态。但是，除了这个警告之外什么也没发生：

警告：React.createElement：type不应为null，未定义，布尔值或数字。它应该是一个字符串（对于DOM元素）或a 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;

Answer 1

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>
        )
    }
});

坚持让反应引导模式工作

1 个答案: