Reactプロジェクト（Marketo）でJS外部リソースを統合するには

Question

実際にはに深く入ります。のウェブサイトを参照してください。

私は実際Marketoコードを処理しています（つまり、フォームを生成）、それは三つの要素を取得します：外部ファイルはDIV内の書き込みフォーム

スクリプトのIDで

本部をリンク

<script src="//app-sjst.marketo.com/js/forms2/js/forms2.js"></script> 
 
    <form id="mktoForm_1057"></form> 
 
    <script> 
 
     MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057, function(form){ 
 
     //Add an onSuccess handler 
 
     form.onSuccess(function(values, followUpUrl){ 
 
      //get the form's jQuery element and hide it 
 
      form.getFormElem().hide(); 
 
      //return false to prevent the submission handler from taking the lead to the follow up url. 
 
      return false; 
 
     }); 
 
     }); 
 
    </script>

HTMLを使用せずにReactのクラスに正しく統合するにはどうすればよいですか？ 私はアイデアを書いたが、innerHTMLを注入するとURLは処理されない。 は、ここで私がやったものだ：アドバイスで

import React 
 
\t from 'react'; 
 
import PropTypes 
 
\t from 'prop-types'; 
 

 
const scriptMarketo = <script dangerouslySetInnerHTML={{ __html: ` 
 
\t \t MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057); 
 
\t \t console.log('test'); 
 
\t ` }} />; 
 

 
class MarketoForm extends React.Component { 
 
\t render() { 
 
\t \t return \t <div> 
 
\t \t \t <form id="mktoForm_1013"></form> 
 
\t \t \t {scriptMarketo} 
 
\t \t </div>; 
 
\t } 
 
} 
 

 

 
export default MarketoForm;

多くの感謝！

Answer 1

まだ詰まっているかどうかわかりません。似たような問題に遭遇すると、それが役に立つかもしれないと思った。コメント内のリンクAdding script tag to React/JSXがちょうどMarketo

class MarketoForm extends Component { 
    /** 
    * need to inject 
    */ 
    componentDidMount() { 
    const script = document.createElement('script'); 
    document.body.appendChild(script); 
    // Depending on your lint, you may need this 
    // eslint-disable-next-line no-undef 
    MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057) 
    } 


    render() { 
    return (
     <React.Fragment> 
     <form id="mktoForm_1013"></form> 
     </React.Fragment> 
    ) 
    } 
}; 

でこれのいくつかを対処するために少し物事を調整するために必要な、近くにあるにもご使用することができる状態モデルの種類によって異なります。状態更新のMarketoフォームを再レンダリングしたいので、私は使用していますcomponentDidMount