如何将带有主体结束标签的reactjs模态窗口追加到带有主体标签的模态定位绝对值中。
这是在另一个组件内添加的示例。
<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>
在反应中,这通常称为“层”。看到这个小提琴
/** @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);
问题内容: 我开始学习一些JavaScript,并且了解在命名标识符时不允许使用破折号。但是,在CSS中,ID和类通常使用破折号。 在CSS中使用破折号是否会干扰javascript交互?例如,如果我要使用。我已经尝试了一些使用getElementByID并将破折号作为div ID的名称的示例,并且它可以工作,但是我不确定在所有其他情况下是否都是这种情况。 问题答案: 在ID(或类名,如果您选择的
我正在为一个学校项目制作一个网站,希望模糊/审查一个图像,并让它在悬停时取消模糊/取消审查该图像,但我遇到了实现这一点的问题。 这是我的密码:
现今的许多插件对javascript 和层叠样式表依赖更多了。将你插件中的javascript 和css 放置到分离的文件中是非常重要的,那样做会使插件维护起来更加容易。此系列中的这个部分将介绍怎样在你的插件中加载javascript 和CSS 文件。 添加你的JavaScript 你的插件可能需要装载prototype 类库,或者一个自定义的脚本。这一节将向你展示几个WordPress 函数,它
问题内容: 因此,通常包括我需要简单样式的大多数SVG图标,我这样做: 现在,我一直在玩ReactJS作为它的后期评估在我的新的前端开发堆栈可能的成分,但是我注意到,在其支持的标记/属性列表,无论是或支持。 是否可以使用svg精灵并以这种方式在ReactJS中加载它们? 问题答案: 2018年9月更新 :不建议使用此解决方案,请阅读乔恩的答案。 - 反应并不支持所有的SVG标签就像你说的,有支持的
在本章中,您将学习如何优化CSS和JavaScript。 需要进行优化以从源文件中删除不必要的数据(例如空格和未使用的字符)。 它减少了文件的大小,并允许它们加载更快 安装插件以优化CSS和JavaScript 从命令行转到“work”目录并使用以下命令安装“gulp-uglify”,“gulp-minify-css”和“gulp-concat”插件 - npm install gulp-ugli
问题内容: 尝试做一些我想会很简单的事情。我想导入一个现有的JavaScript库,然后调用它的函数。因此,例如,我想导入blah.js,然后调用blah()。 只是想知道要完成这项工作我需要做什么神奇的组合。也许我只是错过了重点。该示例给出错误“ TypeError:_blah.blah未定义”。 问题答案: 命名出口: 假设您创建了一个名为的文件,其中包含您希望其他模块(例如React组件)可