javascript - 如何从外部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')
  );
 }

以下是我的 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:reactjs 文件在 jquery 文件之前加载，因此调用的函数已经存在，我通过创建另一个 javascript 文件并调用其中存在的函数来尝试相同，它似乎工作正常。

Answer 1

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

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

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