在Preact中创建可插拔组件

Question

我已经开始使用preact创建一个占用空间更小的pwa。到目前为止，一切都很顺利，应用程序几乎是作为一个模块化组件完成的。

当我试图将这个组件插入到另一个react web应用程序中时，天堂的麻烦就发生了。preact组件只是在单词go上呈现。而我想在我自己的视图层次结构中实例化这个组件。

类似于：

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

但是，只要我尝试在Preact的构建中包含bundle.js，它就会呈现给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()

Answer 1

您是使用preact-cli构建bundle.js的吗？目前，preact-cli的主要目标是构建渐进式Web应用程序，而不是用于其他代码库的捆绑包(它不是一个通用捆绑包)。您并没有调用preact.render()，但是CLI实际上将您的组件包装在一个render调用和一些其他东西中，比如polyfills，以改善体验并减少样板。

我相信如果你真的想使用preact-cli来构建一个供其他应用使用的包(虽然不太可能是React，因为现在根本不可能)，你可以创建一个preact.config.js来做这件事：

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

但老实说，我不建议你这么做。CLI是专门为创建PWA而构建的，这不是您在这里要进行的设置。

希望这能有所帮助！