javascript - React项目中如何集成JS外部资源(Marketo)

Question

我实际上正在深入 React 网站，但我发现集成外部库代码非常困难。

我实际上正在处理 Marketo 代码(生成一个 FORM)，它包含三个元素:

• 外部文件链接
• 带有表单 id 的 Div
• 写在DIV里面的脚本

    <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 中的类中？我写了一个想法，但如果注入(inject) innerHTML，则不会处理 url。这是我所做的:

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

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

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


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