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

Question

I was trying to create a pop over for one of my elements which are using react and bootstrap.

Following is my React Code:-

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

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

Following is my jquery called the shareRenderFunc() :-

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

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

Following is my HTML containing the popover element:-

<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>

But in the console I am getting TypeError saying shareRenderFunc is not a function

PS: the reactjs file is loaded before the jquery file so the function called is already there, i tried same by creating another javascript file and calling function present in there and it seems to be working fine.

Answer 1

Your shareRenderFunc only exists in the local scope of your Share class. You need to define it as global via the window object :

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

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

Answer 2

did u try to change

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

in to this...

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

you only need to call the function wihtout params if you didnt' set one.

shareRenderFunc();

PS: If you want your jQuery load before your reactsjs, then try to write your jQuery script over your reactsjs line

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