BEEQ 反应收发器
一个轻量级的公用设备,可以包装BEEQ自定义元素("web 组件"),从而可以像本土反应组件一样被使用.
为什么有必要?
反应和定制元素不能很好地一起发挥. 这个问题最好由下列文件来描述: 自定义元素出处数字 :
处理数据
React以HTML属性的形式将所有数据传递给自定义元素. 对于原始数据来说,这是好的,但是系统在传递丰富的数据时会崩溃,比如物体或阵列. 在这种情况下,你最后会得到一些字符串的值,如“[对象对象]”实际上不能使用.
处理事件
由于React执行自己的合成事件系统,它不能听从来自自定义元素的DOM事件而不使用工作绕道. 开发者需要使用一个参考器引用其自定义元素, 并手动附加带有添加EventListener的事件倾听器 。 这使得与自定义元素的合作变得麻烦.
此工具通过曝光一个将属性和事件映射到基本自定义元素的本地反应组件来解决这些问题. QQ
软件包安装
[TIP] 请永远提到 bEEQ 正式文件 关于安装的更多信息.
- 安装软件包
npm install @beeq/{core,react}
[注] 确保您安装了
@beeq/core软件包.
添加 BEEQ 样式和资产
将 BEEQ 样式导入您的应用程序主样式文件 :
@import "@beeq/core/dist/beeq/beeq.css";
[TIP] BEEQ使用SVG图标,这些资产被运入单独的文件夹. 你可以用这个
setBasePath设置图标路径的方法。 确保您的工程将图标捆绑在浏览器可以访问的方式 .
您可以将图标从节点模块文件夹移动到您的资产文件夹并设置这样的路径 :
// vite.config.js
import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
react(),
viteStaticCopy({
targets: [
{
src: './node_modules/@beeq/core/dist/beeq/svg/*',
dest: 'icons/svg',
},
// add more targets if needed
],
}),
],
// other configurations
});
// main.ts
import { setBasePath } from "@beeq/core/dist/components";
setBasePath('icons/svg');
请注意路径
但您也可以使用不同的图标库或CDN:
import { setBasePath } from "@beeq/core/dist/components";
// Using heroicons library
setBasePath('https://cdn.jsdelivr.net/npm/[email protected]/24/outline');
[叹息] 在使用不同的图标库时,确保您使用由库或CDN提供的正确的图标名称.
使用量
import React from 'react';
import { BqButton } from '@beeq/react';
function App() {
const handleButtonClick = (ev: CustomEvent) => {
console.log(ev.detail);
};
return (
<BqButton appearance="primary" onBqClick={handleButtonClick}>
Click Me
</BqButton>
);
}
export default App;