Dynamisches Skript-Tag einfügen, die

Question

über Reactjs ausführen

Es gibt eine Reihe von Antworten auf diese, aber ich bin auf der Suche nach etwas bestimmten

Mein Komponentencode reactjs:

render: function() { 

    return (
     <Modal {...this.props} title="Embed on your own site!"> 
     <div className="modal-body"> 
      <div className="tm-embed-container" dangerouslySetInnerHTML={{__html: embedCode}}> 
      </div> 
      <textarea className="tm-embed-code" rows="4" wrap="on" defaultValue={embedCode}></textarea> 
     </div> 
     </Modal> 
    ); 
    } 
}); 

Der script-Tag ist da auf der Seite, aber keine Ausführung. Sollte ich außerhalb der Reaktion gehen und nur gutes altes DOM-Skript verwenden, wie die anderen Antworten anzeigen?

Answer 1

Für das, was ich verstehe, wäre die Reaktion Weg, die "ComponentDidMount" -Funktion zu verwenden, was Sie in das Div, einschließlich einige externe Skript einfügen möchten.

Wenn Ihre Komponente dynamisch ist und regelmäßig neue Requisiten empfängt, sollten Sie auch andere Methoden (wie componentDidUpdate) in Betracht ziehen.

Mehr über Script Insertion mit jQuery auf this question

componentDidMount: function(){ 
 
    var embedCode = this.props.embedCode; // <script>//my js script code</script> 
 
    
 
    $('#scriptContainer').append(embedCode); 
 
    }, 
 

 
    render: function() { 
 
    return (
 
     <Modal {...this.props} title="Embed on your own site!"> 
 
     <div className="modal-body"> 
 
      <div className="tm-embed-container" id="scriptContainer"> 
 
      </div> 
 
      <textarea className="tm-embed-code" rows="4" wrap="on" defaultValue={this.props.embedCode}></textarea> 
 
     </div> 
 
     </Modal> 
 
    ); 
 
    } 
 
});

Letzte Frage

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

 Verwandte Themen

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