Question

我实际上在 React网站中更深入，但我发现很难集成外部库代码。

我实际上正在处理Marketo代码（生成一个FORM），它有三个元素：

链接外部文件
Div with the Form for the Form
在DIV内写的脚本

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;

如何在不使用HTML的情况下在React中正确集成？我写了一个想法，但如果注入innerHTML，则不会处理url。这就是我所做的：

{{1}}

非常感谢你的建议！

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

如何在React项目中集成JS外部资源（Marketo）

1 个答案: