如何从外部 JS 文件调用 react js 中的函数答案

【问题标题】：How to call a function in react js from an external JS File如何从外部 JS 文件调用 react js 中的函数
【发布时间】：2016-06-08 06:37:57
【问题描述】：

我试图为我使用 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);

以下是我的包含弹出元素的 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 文件并调用其中存在的函数，它似乎工作正常。

【问题讨论】：

不知道，它应该可以工作。 shareRenderFunc 的类型是什么？ console.log(typeof window.shareRenderFunc);
如何在 HTML 中包含 React 代码？你是使用 webpack 还是通过 babel？由于您的代码是 JSX，因此需要将其转换为 Javascript。在您的 jQuery 代码调用该函数之后，必须进行转换。

标签： javascript jquery twitter-bootstrap reactjs

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

你有没有尝试改变

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

进入这个...

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

如果你没有设置参数，你只需要调用没有参数的函数。

shareRenderFunc();

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

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

【讨论】：