如何在react js中显示页面加载的lightbox弹出窗口
如何在react js中显示页面加载的lightbox弹出窗口
提问于 2017-02-22 15:23:32
我想在页面加载时显示弹出窗口，但我不了解react javascript。我使用的是lightbox弹出窗口。它工作得很好，但它的onclick功能工作正常。我需要在页面加载时打开弹出窗口。我的代码是：
<html>
<head>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react-with-addons.js'></script>
<script type="text/jsx" src='js/react-lightbox.jsx'></script>
</head>
<body>
<div id='react-canvas'></div>
<script type="text/jsx">
/** @jsx React.DOM */
React.renderComponent(
<Lightbox>
<LightboxTrigger>
<a href='javascript:void(0)'>Click me to open!</a>
</LightboxTrigger>
<LightboxModal>
<div>
<h1>This is the basic usage!</h1>
<p>Good luck :D</p>
</div>
</LightboxModal>
</Lightbox>,
document.getElementById('react-canvas')
);
</script>
</body>
</html> 回答 1
Stack Overflow用户
发布于 2017-02-22 17:23:21
尝试在componentWillMoutn上创建客户元素并添加方法this.props.openLightbox
var ToggleButton = React.createClass({
componentWillMount(){
this.props.openLightbox();
}
render() {
return(<button onClick={this.props.openLightbox}>Open Lightbox</button>);
}
});并将此自定义元素放入<LightboxTrigger>
<LightboxTrigger>
<ToggleButton />
</LightboxTrigger>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42385107
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号