如何从外部JS文件中调用反应js中的函数

时间:2016-06-08 06:37:57

标签: javascript jquery twitter-bootstrap reactjs

我试图为我的一个使用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文件并调用函数存在于那里尝试相同,它似乎工作正常。

2 个答案:

答案 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 */