如何将动态宽度和高度应用于react-bootstrap模态窗口?我在这里检查了react-bootstrap文档,但无法弄清楚如何做到这一点.实际上,宽度和高度道具的值将是动态的(可以是任何值),因为这将是我的应用程序中的可重用组件(在许多页面上使用),因此不能通过某些CSS类应用宽度/高度.
文档中提到的'bsSize'属性也不起作用,虽然xs,md,lg的预定义大小不是我想要的,而是我需要通过props在模态上设置宽度和高度.
这是我的示例JSX代码:
var MyWindow = React.createClass({
getInitialState() {
return { show: true };
},
close() {
this.setState({ show: false });
},
open() {
this.setState({ show: true });
},
save() {
},
render: function () {
var Button = ReactBootstrap.Button,
Modal = ReactBootstrap.Modal,
ModalBody = ReactBootstrap.ModalBody,
ModalHeader = ReactBootstrap.ModalHeader,
ModalFooter = ReactBootstrap.ModalFooter,
ModalTitle = ReactBootstrap.ModalTitle;
return (
<Modal show={this.state.show} onHide={this.close}>
<ModalHeader closeButton>
<ModalTitle>My Cool Window</ModalTitle>
</ModalHeader>
<ModalBody>
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus</p>
</ModalBody> …Run Code Online (Sandbox Code Playgroud)