我可以通过自定义元素使用Preact组件吗？
我可以通过自定义元素使用Preact组件吗？
提问于 2017-02-19 14:08:20
我想创建一个Preact组件，让人们使用它，即使他们没有构建Preact应用程序。
示例:我希望在Preact中构建一个<MyTooltip>组件，将它捆绑在一起(以及Preact运行时)，并让人们将它作为脚本标记加载，使用它纯粹是声明性的，可能如下所示：
<script src="https://unpkg.com/my-tooltip/my-tooltip-bundled.js">
<my-tooltip content="Tooltip content">Hover here</my-tooltip>是否有一种方法可以将组件打包成包含Preact运行时、我的库代码和钩子到<my-tooltip>元素中的组件？
换句话说，我是否可以将Preact组件互操作为自定义元素，类似于ReactiveElements
回答 5
Stack Overflow用户
回答已采纳
发布于 2017-03-07 13:24:04
有一个很好的库为您创建了preact-定制元素：
https://github.com/bspaulding/preact-custom-element
class SearchBox extends Component {
render() {
// ...
}
}
registerComponent(SearchBox, 'search-box');Stack Overflow用户
发布于 2019-03-14 14:23:10
尽管Jason的回答帮了我很大的忙，但我还是很难给出一个基本的工作示例，所以我从一开始就解决了这个问题：
我的基本html文档，包括包含虚拟the组件的实际代码的捆绑脚本dummy.js：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<script async src="./dummy.js" type="text/javascript"></script>
<dummy-view name="Test"></dummy-view>
</div>
</body>
</html>我的虚拟网页组件：
import {div} from '../utils/hyperscript';
import registerCustomElement from 'preact-custom-element';
const DummyView = ({ name = "World" }) => (
div({}, `Hello, ${name}!`)
);
registerCustomElement(DummyView, "dummy-view", ["name"]);我的webpack配置：
const path = require('path');
module.exports = {
entry: {
dummy: './lib/dummy/dummy-view.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
output: {
path: path.resolve(__dirname, 'webcomponent/')
}
};更多细节：
- 我安装了
preact-custom-element，就像npm i preact-custom-element一样。 - 捆绑是用webpack做的，就像这样：
npx webpack。 index.html将在/webcomponent(例如http://localhost:3000/webcomponent/)下服务。- 在浏览器中访问上面的URL时，结果如下所示：
<div>Hello, Test!</div>增编：
- 由于我使用的是
preact，所以我找到了一种使用preact-habitat的替代方法，它做了非常类似的事情：https://github.com/zouhir/preact-habitat
Stack Overflow用户
发布于 2020-07-13 21:35:14
PreactJS自己也有一个库可以这样做
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42328198
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号