0

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

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

就像是：

<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()

4

1 回答 1

1

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

我相信如果你真的想使用 preact-cli 构建一个包以供另一个应用程序使用（虽然不太可能是 React，因为现在这根本不可能），你可以创建一个preact.config.js这样做的：

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

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

希望有帮助！

于 2017-07-21T06:35:54.387 回答