Хранение JSX на сервере, извлечение его через API и рендеринг с работающей функцией onClick

Question

Мне любопытно, есть ли способ сохранить JSX на сервере, затем извлечь его с помощью вызова API и обработать его.В прошлом я мог делать это с помощью сценариев HTML и jQuery для таких вещей, как модалы.JQuery предоставит функциональность для таких вещей, как кнопка «Закрыть» и т. Д. Это позволяет другим контролировать обновления этого контента, не требуя от разработчика каждый раз обновлять код.Но теперь, когда я использую React на своем сайте, я не вижу способа, которым я мог бы хранить JSX, как это, и все еще иметь функцию onClick:

<div className="modal">
  <div className="container">
    <div className="close-btn">
      <button className="btn" onClick={this.handleClick}>
        <i className="delete-icon"></i>
      </button>
    </div>
    <div className="content">
      <p>Here is where all our content will go!</p>
    </div>
  </div>
</div>

Конечно, если я хранил толькоконтент, я мог бы просто визуализировать его внутри JSX, используя dangerouslySetInnerHTML.Однако, поскольку могут быть разные кнопки, функции и т. Д., Я бы предпочел сохранить JSX на сервере, ПОЛУЧИТЬ его через API и отобразить его на странице.Сама функция onClick может существовать либо в компоненте, отображающем его, либо в onClick следующим образом:

<button 
    className="btn" 
    onClick={() => {this.setState({modalOpen: !this.state.modalOpen})}
>
  <i className="delete-icon"></i>
</button>

Единственная проблема заключается в том, что мне нужно будет вызвать setState() из встроенной функции onClick, и я 'Я не уверен, что setState() или this будут доступны для него.Даже если функция находится в компоненте, я все еще не уверен, что для нее будет доступен this.

В любом случае, я не был уверен, есть ли пакет или метод NPM, которые я мог бы использовать длясделать это реальностью?Если у кого-то есть идеи, пожалуйста, дайте мне знать.Вниз, чтобы попробовать что-нибудь сделать эту работу.Заранее спасибо!