как импортировать компоненты из библиотеки Stencil в приложение React? - PullRequest
Новая
       72

как импортировать компоненты из библиотеки Stencil в приложение React?

0 голосов
/ 19 июня 2020

Я только что создал:

  • шаблон JS библиотеку компонентов с именем "my-lib" с помощью мастера "npm init stencil" и успешно построил его
  • приложение ioni c react с использованием «ioni c start myApp tabs»

Теперь я хотел бы использовать «my-component» по умолчанию, также известный как MyComponent из my-lib, поэтому я

  • добавлено "my-lib" : "../my-lib" в пакет приложения. json зависимостей и «npm установить» отредактировали
  • попробовали множество комбинаций импорта для достижения MyComponent в пространстве имен Components, "лучший" - это 
    import {Components} from 'my-lib'; 
    import MyComponent = Components.MyComponent;

, где завершение кода в Visual Studio Code выполняется успешно, но я получаю:

SyntaxError: C:\Dev\TypeScript\oacs-react\src\pages\Tab1.tsx: `import =` is not supported by @babel/plugin-transform-typescript Please consider using `import <moduleName> from '<moduleName>';` alongside Typescript's --allowSyntheticDefaultImports option.>

Какой правильный способ как решить эту проблему, особенно если вы планируете использовать несколько библиотек внешних компонентов?

1 Ответ

0 голосов
/ 19 июня 2020

Вы можете посмотреть https://stenciljs.com/docs/react. 

import { applyPolyfills, defineCustomElements } from 'my-lib/loader';

applyPolyfills().then(() => {
  defineCustomElements();
});

Вы также можете использовать @stencil/react-output-target для автоматического создания привязок для всех ваших компонентов ( см. https://stenciljs.com/docs/react#bindings), так что если у вас есть my-component, он сгенерирует для вас оболочку MyComponent, которая является настоящим компонентом React.

Что касается вашей ошибки импорта, вы, вероятно, можете импортировать ее как 

import myLib from 'my-lib';
const { MyComponent } = myLib.Components;
...