如何使用body结束标记附加reactjs模态窗口,以使用body标签设置模态定位绝对值.
这是在另一个组件中添加的示例.
<div className="modal">
<p>Model Pop-up <button onClick={this.handleClick}>here</button></p>
<div id="js-modal-inner" className="modal">
<div className="modal__content js-dialog">
<a className="modal__close" onClick={this.handleClose}>×</a>
<header className="modal__header">
<h2 className="modal__title">Split Ticket:</h2>
</header>
<div className="modal__content--inner">
{this.props.children}
</div>
</div>
</div>
<div className="modal__overlay js-fade"></div>
</div>
解决方法
这通常被称为反应中的“层”.见
this fiddle
/** @jsx React.DOM */
var ReactLayeredComponentMixin = {
componentWillUnmount: function() {
this._unrenderLayer();
document.body.removeChild(this._target);
},componentDidUpdate: function() {
this._renderLayer();
},componentDidMount: function() {
// Appending to the body is easier than managing the z-index of everything on the page.
// It's also better for accessibility and makes stacking a snap (since components will stack
// in mount order).
this._target = document.createElement('div');
document.body.appendChild(this._target);
this._renderLayer();
},_renderLayer: function() {
// By calling this method in componentDidMount() and componentDidUpdate(),you're effectively
// creating a "wormhole" that funnels React's hierarchical updates through to a DOM node on an
// entirely different part of the page.
React.renderComponent(this.renderLayer(),this._target);
},_unrenderLayer: function() {
React.unmountComponentAtNode(this._target);
}
};
var Modal = React.createClass({
killClick: function(e) {
// clicks on the content shouldn't close the modal
e.stopPropagation();
},handleBackdropClick: function() {
// when you click the background,the user is requesting that the modal gets closed.
// note that the modal has no say over whether it actually gets closed. the owner of the
// modal owns the state. this just "asks" to be closed.
this.props.onRequestClose();
},render: function() {
return this.transferPropsTo(
<div className="ModalBackdrop" onClick={this.handleBackdropClick}>
<div className="ModalContent" onClick={this.killClick}>
{this.props.children}
</div>
</div>
);
}
});
var ModalLink = React.createClass({
mixins: [ReactLayeredComponentMixin],handleClick: function() {
this.setState({shown: !this.state.shown});
},getInitialState: function() {
return {shown: false,ticks: 0,modalShown: false};
},componentDidMount: function() {
setInterval(this.tick,1000);
},tick: function() {
this.setState({ticks: this.state.ticks + 1});
},renderLayer: function() {
if (!this.state.shown) {
return <span />;
}
return (
<Modal onRequestClose={this.handleClick}>
<h1>Hello!</h1>
Look at these sweet reactive updates: {this.state.ticks}
</Modal>
);
},render: function() {
return <a href="javascript:;" role="button" onClick={this.handleClick}>Click to toggle modal</a>;
}
});
React.renderComponent(<ModalLink />,document.body);
