Динамически вставить тег script, который будет выполняться через 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>
    );
  }
});

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

Ответы

Ответ 1

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

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

Подробнее о script вставке с jQuery на этот вопрос

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