如何从外部JS文件调用React JS中的函数

Question

我正在尝试为使用React和Bootstrap的元素之一创建弹出窗口。

以下是我的React代码：-

class Share extends React.Component{
   render(){
      return(
        <div>hello</div>
      );
    }
  }

  var shareRenderFunc=function() {
     ReactDOM.render(
      <Share/> , document.getElementById('shareContainer')
  );
 }

以下是我的名为shareRenderFunc（）的 jquery：

var popOverSettings = {
placement: 'bottom',
container: 'body',
selector: '[rel="popover"]', 
content: function(){
  window.shareRenderFunc();
  return $('#shareContainer').html();
  }
}

$('body').popover(popOverSettings);

以下是我的HTML包含popover元素：-

<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不是函数

PS：reactjs文件是在jquery文件之前加载的，因此调用的功能已经存在，我尝试通过创建另一个javascript文件并调用其中存在的功能来尝试相同的功能，并且看起来工作正常。

Answer 1

您的shareRenderFunc仅存在于Share类的本地范围内。 您需要通过window对象将其定义为global：

class Share extends React.Component{
   render(){
      return(
        <div>hello</div>
      );
    }
 }

window.shareRenderFunc=function() {
     ReactDOM.render(
         <Share/> , document.getElementById('shareContainer')
     )
);

Answer 2

你有没有尝试改变

var shareRenderFunc=function() {
     ReactDOM.render(
      <Share/> , document.getElementById('shareContainer')
     );
}

对此...

function shareRenderFunc(){
    ReactDOM.render(
        <Share/> , document.getElementById('shareContainer')
    );
}

如果您未设置参数，则只需要调用wihtout参数函数即可。

shareRenderFunc();

PS：如果您希望在reactsjs之前加载jQuery，请尝试在reactsjs行上编写jQuery脚本

<script src="jquery ...."></script>
/* and here your reactsjs */