Создать подключаемый компонент в Preact

Я начал работать с preact, чтобы создать pwa с меньшим размером. До сих пор все идет хорошо, и приложение почти готово как модульный компонент.

Проблема в раю возникла, когда я попытался подключить этот компонент к другому веб-приложению React. Компонент preact просто выполняет рендеринг на ходу. В то время как я хочу создать экземпляр этого компонента в моей собственной иерархии представлений.

Что-то вроде:

<div className={'abcd'}>
  <PreactComponent />
</div>

Но как только я пытаюсь включить bundle.js из сборки Preact, он выполняет рендеринг, body стирая все остальное.

Что-то мне не хватает?

Это Preact index.js

import { h, render, Component } from 'preact';
import './style';
import App from './components/app';

export default class Player extends Component {
  render() {
    let bucketId = this.props.bucketId
    let videoId = this.props.videoId
    return <App pluggedIn={true} />
  }
}

В идеале это должно было дать мне компонент <Player/>, но он рендерится сам по себе. Я даже не использую Preact.render()


reactjs preact
person amit    schedule 19.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы создали свой bundle.js с помощью preact-cli? Прямо сейчас preact-cli в основном нацелен на создание прогрессивных веб-приложений, а не пакетов для использования в других кодовых базах (это не универсальный сборщик). Вы не вызываете preact.render (), но CLI фактически обертывает ваш компонент в вызове рендеринга и некоторых других вещах, таких как полифилы, чтобы улучшить опыт и уменьшить шаблон.

Я считаю, что если вы действительно хотели использовать preact-cli для создания пакета для использования другим приложением (хотя вряд ли React, поскольку это вообще невозможно сейчас), вы могли бы создать preact.config.js, который делает это:

export default config => {
  config.output.library = 'myLibName';
  config.output.libraryTarget = 'umd';
}

Но, честно говоря, я бы не рекомендовал это. Интерфейс командной строки создан специально для создания PWA, а это не та настройка, которую вы здесь собираетесь использовать.

Надеюсь, это поможет!

person Jason Miller    schedule 21.07.2017
comment
да я использовал preact-cli. Подскажите, пожалуйста, как это сделать как компонент? Я не хочу создавать этот компонент в React. - person amit; 21.07.2017