Как вызвать функцию в react js из внешнего файла JS

Question

Как вызвать функцию в react js из внешнего файла JS

Я пытался создать pop over для одного из моих элементов, которые используют 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);

Ниже приведен мой 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-это не функция

P. S: файл reactjs загружается перед файлом jquery, поэтому вызываемая функция уже там, я попробовал то же самое, создав другой файл javascript и вызывая функцию, присутствующую там, и это, кажется, работает нормально.

992 2

jQuery javascript reactjs twitter-bootstrap

2 ответов:

Comments

Ничего не найдено.

Pcriulan · Accepted Answer · 2016-06-08 12:33:58

Ваш shareRenderFunc существует только в локальной области вашего класса Share. Вам нужно определить его как глобальный через объект window:
class Share extends React.Component{
   render(){
      return(
        <div>hello</div>
      );
    }
 }

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

KazutoSensei · Accepted Answer · 2016-06-08 10:25:44

Пытались ли вы изменить
var shareRenderFunc=function() {
     ReactDOM.render(
      <Share/> , document.getElementById('shareContainer')
     );
}
В этом...
function shareRenderFunc(){
    ReactDOM.render(
        <Share/> , document.getElementById('shareContainer')
    );
}
Вам нужно только вызвать функцию wihtout params, если вы ее не установили.
shareRenderFunc();
PS: Если вы хотите, чтобы ваш jQuery загружался до reactsjs, попробуйте написать сценарий jQuery поверх строки reactsjs
<script src="jquery ...."></script>
/* and here your reactsjs */