Question

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

天堂的麻烦发生在我试图将这个组件插入另一个反应网络应用程序中时。 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主要用于构建Progressive Web Apps，而不是用于其他代码库的捆绑（它不是通用捆绑器）。您没有调用preact.render（），但CLI实际上将您的组件包装在渲染调用和其他一些内容中，例如polyfill，以便改善体验并减少样板。

我相信如果你真的想使用preact-cli构建一个捆绑供其他应用程序使用（虽然不太可能是React，因为现在根本不可能），你可以创建一个{{ 1}}这样做：

preact.config.js

但说实话，我不推荐它。 CLI是专门为创建PWA而构建的，这不是您在此处的设置。

希望有所帮助！

在Preact

1 个答案: