如何以编程方式打开/关闭react引导模式？

您正在寻找的是自定义模式触发器，它使用overlymixin并允许您自己管理模式的状态。您可以使用this.setState（{isModalOpen:true}）来控制是否显示模式，以实现与下面示例中您在帖子中要求的内容相同的效果。以下代码来自react引导程序网站(http://react-bootstrap.github.io/components.html#modals):

const CustomModalTrigger=React.createClass({
mixin:[overlymixin]，
getInitialState（）{
返回{
伊斯莫达洛彭：错
};
},
手语{
这是我的国家({
isModalOpen:！this.state.isModalOpen
});
},
render（）{
返回(
&lt；Button onClick={this.handleToggle}bsStyle='primary'&gt；启动&lt；/Button&gt；
);
},
//当此组件
//安装或更新，并将返回值附加到主体。
renderverlay（）{
如果（！this.state.isModalOpen）{
返回&lt；span/&gt；；
}
返回(
&lt；Modal bsStyle='primary'title='Modal heading'onRequestHide={this.handleToggle}&gt；
&lt；div className='modal-body'&gt；
此模式由我们的自定义触发器组件控制。
&lt；/div&gt；
&lt；div className='modal-footer'&gt；
&lt；Button onClick={this.handleToggle}&gt；Close&lt；/Button&gt；
&lt；/div&gt；
&lt；/Modal&gt；
);
}
});
React.render（&lt；CustomModalTrigger/&gt；，mountNode）；

更新（2015年8月4日）

在React Bootstrap的最新版本中，是否显示模态由传递给模态的showprop控制。控制模式状态不再需要OverlyMixin。仍然通过setState控制模式的状态，在本例中，通过this.setState（{showmodel:true}）。以下内容基于React Bootstrap网站上的示例：

常量ControlleModalExample=React.createClass({
getInitialState（）{
返回{showmodel:false}；
},
关闭（）{
this.setState（{showmodel:false}）；
},
开（）{
this.setState（{showmodel:true}）；
},
render（）{
返回(
&lt；div&gt；
&lt；按钮onClick={this.open}&gt；
发射模态
&lt；/Button&gt；
&lt；Modal show={this.state.showModal}onHide={this.close}&gt；
&lt；模态收割台关闭按钮&gt；
&lt；模态标题&gt；模态标题&lt；/模态标题&gt；
&lt；/Modal.Header&gt；
&lt；模态车身&gt；
&lt；div&gt；此处的模态内容&lt；/div&gt；
&lt；/Modal.Body&gt；
&lt；模态页脚&gt；
&lt；Button onClick={this.close}&gt；close&lt；/Button&gt；
&lt；/Modal.Footer&gt；
&lt；/Modal&gt；
&lt；/div&gt；
);
}
});