Блог

Главная - Вопросы по программированию - Встраивание формы в React

Встраивание формы в React

javascript #reactjs

#javascript #reactjs

Вопрос:

Я пытаюсь встроить форму в page.js Реагирующий компонент. Скрипт src загружается на страницу, но не код формы.

Вот исходный HTML-код для встраивания:

 <script type="text/javascript" src="https://koi-3QNK98WC9Y.marketingautomation.services/client/form.js?ver=2.0.1"></script>

<script type="text/javascript">
var ss_form = {'account': 'MzawMDE3tzQzBQA', 'formID': 'M0xNNjW2TDXSTUozMNI1MU421U00Sk7UTU5OTbJIs0wyTrVMBAA'};
              ss_form.width = '100%';
              ss_form.domain = 'app-3QNK98WC9Y.marketingautomation.services';
              ss_form.target_id = 'form'; 
              ss_form.polling = true; 
</script>

Вот что у меня сейчас есть в React:

 import React, { useEffect } from "react";

 function Contact() {
   
  useEffect(() => {
      const script = document.createElement('script');
      script.src='https://koi-3QNK98WC9Y.marketingautomation.services/client/form.js?ver=2.0.1';
      document.body.appendChild(script);

      script.addEventListener('load', () => {         
          var ss_form = {'account': 'MzawMDE3tzQzBQA', 'formID': 'M0xNNjW2TDXSTUozMNI1MU421U00Sk7UTU5OTbJIs0wyTrVMBAA'};
          ss_form.width = '100%';
          ss_form.domain = 'app-3QNK98WC9Y.marketingautomation.services';
          ss_form.target_id = 'form'; 
          ss_form.polling = true; 
      });
      
  }, []);
    
    return (
    <main>
      <div id="form"> </div>
    </main>
    );

  }

export default Contact;

Там, где должна была появиться форма (внутри de #form div), она просто пуста, и код не отображается.

Я не вижу, что я делаю не так.

Комментарии:

1. Вы должны прослушивать событие загрузки и использовать ссылку на элемент (useRef). Это пример загрузки карты Google , но принципы те же.

2. Установлен ss_form.target_id = 'form' для отображения формы внутри #form div уже, нет необходимости в ссылке <Form /> . Мне просто нужно, чтобы скрипт загружался внутри элемента <head> как есть.

3. Я пытался использовать Helmet для этого, но иногда форма появляется, другие — нет. Поскольку я не могу решить проблему, почему скрипт иногда не загружает форму с помощью Helmet, я пытаюсь реализовать ее с помощью useEffect().

Метки: