Динамическая загрузка компонента / пакета React из внешнего источника - PullRequest
Новая
       12

Динамическая загрузка компонента / пакета React из внешнего источника

2 голосов
/ 03 июля 2019

Чего я хочу добиться, так это позволить людям создавать и создавать свой собственный контент React (предположим, что этот контент является доверенным, поскольку он будет обслуживаться из моих собственных API-интерфейсов), а затем динамически загружать этот контент в мой интерфейс React.

Я охотился, пытаясь найти способ заставить это работать, но мне не хватает последней части, чтобы заставить это работать, или это может быть невозможно.

Итак, представьте, что мой уже встроенный пользовательский интерфейс развернут и работает с базовым приложением, таким как: (для краткости я пропустил импорт модулей) 

const App = () => (
  <h1>My App</h1>
  <DynamicContent />
);

... так что для компонента динамического контента я хочу иметь возможность загружать внешний источник - я видел react-loadable много упомянул, так что надеюсь, что это поможет: 

const DynamicComponent = () => (
  state = { content: null };

  componentDidMount() {
    const content = Loadable({
      loader: () => import(fetch('http://localhost:3000/dynamic')),
      loading: () => <div>Loading { m }...</div>,
    });
    this.setState({ content });
  }

  render() {
    return this.state.content;
  }
);

Если затем предположить, что нажатие http://localhost:3000/dynamic возвращает строку компонента, подобную этой: 

const MyContent = () => <h2>Dynamic Content</h2>;

export default MyContent;

Я обнаружил, что независимо от того, в каком формате я возвращал извлеченный JS (необработанный JSX, как указано выше, полностью переносимый JS или пакет веб-пакета), содержимое не отображается.

Единственный способ сделать рендеринг динамического контента - это если это существующий контент в базе кода пользовательского интерфейса, который разделен по коду посредством относительного импорта файлов, например, import('./DynamicContent').

Возможно ли это вообще? Такое ощущение, что так и должно быть, но я явно чего-то не понимаю в моем понимании. Возможно, есть решение, связанное с SSR, но я мог бы найти полезный пример, который расставляет по местам нужные мне элементы.

Спасибо.

...