Можно ли отобразить компонент React.JS там, где источник компонента извлечен из вызова API остальных? - PullRequest
Новая
       1

Можно ли отобразить компонент React.JS там, где источник компонента извлечен из вызова API остальных?

4 голосов
/ 18 марта 2019

Мне интересно, возможно ли отобразить компонент реагирования, если источник компонента извлечен из вызова API остальных?Например, если компонент существует в базе данных.

Пожалуйста, не отвечайте просто: «Я бы этого не делал» или «Это не рекомендуется».Я понимаю, что это не нормальный подход.

В сценарии использования есть список «виджетов», которые находятся в хранилище данных и извлекаются по мере необходимости.А также создание компонентов на лету.В идеале это должно происходить во время выполнения на клиенте, но я бы тоже согласился с переключением на чисто серверную реакцию, если это единственный способ.

Примечание. Это отличается от разделения кода.Я пробовал различные способы вызова «import (...)», но так как компонент приходит из вызова API api, я не смог заставить это работать.Если есть способ, пожалуйста, дайте мне знать.

Я видел похожий пример, расположенный здесь: https://codepen.io/qborreda/pen/JZyEaj?editors=1010. Но у него было несколько ограничений.А именно любой дополнительный импорт, который понадобится самому компоненту. 

function loadRemoteComponent(url){
  return fetch(url)
  .then(res=>res.text())
  .then(source=>{
    var exports = {}
    function require(name){
      if(name == 'react') return React
      else throw `You can't use modules other than "react" in remote component.`
    }
    const transformedSource = Babel.transform(source, {
      presets: ['react', 'es2015', 'stage-2']
    }).code
    eval(transformedSource)
    return exports.__esModule ? exports.default : exports
  })
}

loadRemoteComponent('https://codepen.io/tonytonyjan/pen/QEawag.js').then((Hello) => {
  ReactDOM.render(<Hello/>, document.getElementById('hello'))
})

Я думал, что смогу сохранить транспортированную версию компонента и задействовать ее.Но до сих пор я не смог заставить это работать.Обычно проблема заключается в том, что либо компонент не выполняет визуализацию, либо React выдает ошибки, поскольку ожидает, что компонент не является необработанным текстом.

Я также пытался вручную переносить данные на клиенте, аналогично примерам «Начало работы» на веб-сайте реагирования, включая отдельный процессор babel и сценарии реагирования на клиенте (с помощью тегов сценария).

Поэтому я подумал, что спрошу сообщество.Напомним, мой вопрос таков: могу ли я хранить компонент реагирования в каком-либо хранилище данных, вставить его на свой веб-сайт и отобразить его?

  • Можно ли это сделать исключительно на клиенте?
  • Будет ли использование рендеринга на стороне сервера React сделать это проще?
  • Или это можно сделать только на этапе сборки перед запуском сайта?

Любая помощь приветствуется.Либо с подробным описанием необходимых шагов, либо с простым рабочим примером было бы здорово.И я на самом деле не против следующих ссылок, чтобы получить мой ответ.(Я знаю, шокирующе!)

О, на случай, если вам интересно, что я использовал приложение create-Reaction-app для генерации приложения, но я также попытался создать приложение вручную, настраивая webpack / babel самостоятельно.

Спасибо.

...