inserire dinamicamente tag script che verrà eseguito tramite Reactjs

Question

Ci sono un sacco di risposte su questo, ma sto cercando qualcosa di specifico per reactjs

Il mio codice componente:

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> 
    ); 
    } 
}); 

Il tag script è lì sulla pagina, ma nessuna esecuzione. Dovrei andare fuori di reagire e usare solo il buon vecchio DOM scripting come indicano le altre risposte?

Answer 1

Per quello che ho capito, il modo in cui reagire sarebbe utilizzare la funzione "componentDidMount" per inserire ciò che si desidera nel div, incluso un certo script esterno.

Se il componente è dinamico e riceve nuovi puntelli regolari, è necessario considerare anche altri metodi (come componenteDidUpdate).

più su inserimento script con jQuery sul 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> 
 
    ); 
 
    } 
 
});

Ultima domanda

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

 Problemi correlati

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