gpt4 book ai didi

javascript - 坚持让 react 引导模式工作

转载 作者:行者123 更新时间:2023-12-02 15:16:22 26 4
gpt4 key购买 nike

我很难理解我做错了什么。基本上我只是想在点击 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;

最佳答案

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

关于javascript - 坚持让 react 引导模式工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34442007/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com