Verwenden Sie eingebetteten Code von Drittanbietern in einer React-Komponente

Question

Ich muss einen dritten Teil Code für ein Formular einbetten. Ich versuche, es in einer Komponente zurückzugeben, aber es funktioniert offensichtlich nicht. Wie kann ich das einrichten?

class Form extends Component { 

    render() { 

    return (
     <div> 
     <div id="apply_form"> 
      <a name="form" id="formAnchor"></a> 
      <script type="text/javascript" src="https://fs22.formsite.com/include/form/embedManager.js?1605047845"></script> 
      <script type="text/javascript"> 
      EmbedManager.embed({ 
      key: "key", 
      width: "100%", 
      mobileResponsive: true 
      }); 
      </script> 
     </div> 
     </div> 
    ); 
    } 
} 

export default Form; 

Answer 1

Leider gibt es kein wirklich saubere Art und Weise, dies zu tun, kurz in das DOM des Erreichens des externen Skript einzufügen, dann direkt den Einbettungscode ausgeführt wird.

Hier ist, wie ich über diese gehen würde:

class Form extends Component { 

    componentDidMount() { 
    const script = document.createElement('script'); 
    script.setAttribute(
     'src', 
     'https://fs22.formsite.com/include/form/embedManager.js?1605047845'); 
    script.addEventListener('load',() => { 
     EmbedManager.embed({ 
     key: "key", 
     width: "100%", 
     mobileResponsive: true 
     }); 
    }); 
    document.body.appendChild(script); 
    } 

    render() { 
    return (
     <div> 
     <div id="apply_form"> 
      <a name="form" id="formAnchor"></a> 
     </div> 
     </div> 
    ); 
    } 
} 

export default Form; 

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.