我试图为我的一个使用react和bootstrap的元素创建一个弹出窗口。
以下是我的反应代码: -
class Share extends React.Component{
render(){
return(
<div>hello</div>
);
}
}
var shareRenderFunc=function() {
ReactDOM.render(
<Share/> , document.getElementById('shareContainer')
);
}
以下是我的jquery,名为 shareRenderFunc(): -
var popOverSettings = {
placement: 'bottom',
container: 'body',
selector: '[rel="popover"]',
content: function(){
window.shareRenderFunc();
return $('#shareContainer').html();
}
}
$('body').popover(popOverSettings);
以下是包含popover元素的HTML: -
<div className="like-share icons-gray-black">
<a href=""><span><i className="fa fa-heart" aria-hidden="true"></i></span></a>
<a><span><i className="share-social fa fa-share-alt" rel="popover" aria-hidden="true"></i></span></a>
</div>
但是在控制台中我得到TypeError,说shareRenderFunc不是函数
P.S:在jquery文件之前加载reactjs文件,因此调用的函数已经存在,我通过创建另一个javascript文件并调用函数存在于那里尝试相同,它似乎工作正常。
答案 0 :(得分:4)
您的shareRenderFunc
仅存在于Share
课程的本地范围内。您需要通过window
对象将其定义为全局:
class Share extends React.Component{
render(){
return(
<div>hello</div>
);
}
}
window.shareRenderFunc=function() {
ReactDOM.render(
<Share/> , document.getElementById('shareContainer')
)
);
答案 1 :(得分:0)
你试图改变
var shareRenderFunc=function() {
ReactDOM.render(
<Share/> , document.getElementById('shareContainer')
);
}
进入...
function shareRenderFunc(){
ReactDOM.render(
<Share/> , document.getElementById('shareContainer')
);
}
如果你没有&#39;你只需要在没有参数的情况下调用该功能。设置一个。
shareRenderFunc();
PS:如果你想在你的reactsjs之前加载你的jQuery,那么尝试在你的reactsjs行上编写你的jQuery脚本
<script src="jquery ...."></script>
/* and here your reactsjs */