Динамически вставить скрипт тег, который будет выполняться с помощью Reactjs

Question

Есть куча ответов на это, но я искал что-то конкретное для 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> 
    ); 
    } 
}); 

Тег скрипта там на странице, но без исполнения. Должен ли я выйти за пределы реакции и просто использовать хорошие сценарии «DOM», как указывают другие ответы?

Answer 1

Для того, что я понимаю, способ реагирования будет заключаться в использовании функции «componentDidMount» для вставки того, что вы хотите в div, включая некоторый внешний скрипт.

Если ваш компонент динамичен и получает регулярные новые реквизиты, вы должны также рассмотреть другие методы (например, componentDidUpdate).

Подробнее о вставке сценария с JQuery на 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> 
 
    ); 
 
    } 
 
});

Последний вопрос

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

 Смежные вопросы

• Нет связанных вопросов^_^