プレアクトでプラグイン可能なコンポーネントを作成する

Question

私は、プレアクトでより小さなフットプリントでpwaを作成する作業を開始しました。すべてこれまでうまくいっているし、アプリはモジュールコンポーネントとしてほぼ完成している。

このコンポーネントを別のリアウェブアプリにプラグインしようとしたとき、楽園の問題が発生しました。プレアクトコンポーネントは単純に単語goをレンダリングします。私のビュー階層でこのコンポーネントをインスタンス化したいのですが。以下のような

何か：

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

しかし、すぐに、私はPreactのビルドからbundle.jsを含めるしようとして、それは他のすべてを払拭bodyにレンダリングします。

紛失しているものがありますか？

これは理想的Preactindex.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()

Answer 1

preact-cliを使ってbundle.jsをビルドしましたか？現在、preact-cliは主に、プログレッシブWebアプリケーションの構築をターゲットにしています。他のコードベース（汎用のバンドラーではありません）で使用するためのバンドルではありません。 preact.render（）を呼び出すのではありませんが、実際にCLIを使用すると、レンダリングコールやポリフィルなどのコンポーネントがラップして、経験を向上させ、定型文を減らすことができます。

私は本当にあなたが別のアプリで消費するためにバンドルを構築するためにpreact-cliを使用したいと思っています（これは現実的には不可能なReactですが、これは実際には可能ではないため）preact.config.jsを作成できます。

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

正直なところ私はそれをお勧めしません。 CLIは、PWAを作成するために非常に具体的に構築されていますが、これはここで設定するものではありません。

希望に役立ちます！