93 lines
2.2 KiB
Markdown
93 lines
2.2 KiB
Markdown
|
---
|
|||
|
|
name: jjb-cloud-component-manual-import
|
|||
|
|
description: 定义 JJB 云组件手动导入与样式管理规范。在使用 ImportCloudComponent、useUnMountCloudComponentStyle 时查阅。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 云组件使用规范
|
|||
|
|
|
|||
|
|
## 手动导入与样式管理
|
|||
|
|
|
|||
|
|
## 手动导入云组件（ImportCloudComponent）
|
|||
|
|
|
|||
|
|
当需要手动控制云组件的加载时机时，可以使用 `ImportCloudComponent`：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { ImportCloudComponent } from '@cqsjjb/jjb-cloud-component';
|
|||
|
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
|
|||
|
|
function MyPage() {
|
|||
|
|
const [Component, setComponent] = useState(null);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
async function loadComponent() {
|
|||
|
|
try {
|
|||
|
|
const { module, styleId, isNewVersion } = await ImportCloudComponent({
|
|||
|
|
from: 'https://example.com/my-component.js',
|
|||
|
|
dependencies: {
|
|||
|
|
react: React
|
|||
|
|
},
|
|||
|
|
cache: 'force-cache',
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': 'Bearer token'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('样式ID:', styleId);
|
|||
|
|
console.log('是否新版:', isNewVersion);
|
|||
|
|
console.log('组件信息:', module.info);
|
|||
|
|
|
|||
|
|
// 新版云组件需要调用函数获取组件
|
|||
|
|
const CloudComponent = isNewVersion
|
|||
|
|
? module.default({
|
|||
|
|
ref: null,
|
|||
|
|
$$dependencies: { react: React }
|
|||
|
|
})
|
|||
|
|
: module.default;
|
|||
|
|
|
|||
|
|
setComponent(() => CloudComponent);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载失败:', error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loadComponent();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
if (!Component) {
|
|||
|
|
return <Spin />;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return <Component title="Hello" />;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 样式管理
|
|||
|
|
|
|||
|
|
### 自动样式管理
|
|||
|
|
|
|||
|
|
云组件的样式会自动注入到页面中，并在组件销毁时自动清理。
|
|||
|
|
|
|||
|
|
### 手动卸载样式
|
|||
|
|
|
|||
|
|
当需要手动卸载云组件样式时，可以使用 `useUnMountCloudComponentStyle`：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { useUnMountCloudComponentStyle } from '@cqsjjb/jjb-cloud-component';
|
|||
|
|
|
|||
|
|
function MyPage() {
|
|||
|
|
const styleId = 'style-id-123';
|
|||
|
|
|
|||
|
|
const handleUnmount = () => {
|
|||
|
|
// 手动卸载指定样式的云组件
|
|||
|
|
useUnMountCloudComponentStyle(styleId);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Button onClick={handleUnmount}>卸载样式</Button>
|
|||
|
|
{/* ... */}
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|