90 lines
1.8 KiB
Markdown
90 lines
1.8 KiB
Markdown
|
---
|
|||
|
|
name: jjb-cloud-component-advanced
|
|||
|
|
description: 定义 JJB 云组件高级用法。在使用 componentRef、initialize、headers、cache 策略时查阅。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 云组件使用规范
|
|||
|
|
|
|||
|
|
## 高级用法
|
|||
|
|
|
|||
|
|
## 使用 componentRef
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import React from 'react';
|
|||
|
|
import CloudComponent from '@cqsjjb/jjb-cloud-component/CloudComponent';
|
|||
|
|
|
|||
|
|
function MyPage() {
|
|||
|
|
const componentRef = React.useRef();
|
|||
|
|
|
|||
|
|
const handleUpdate = () => {
|
|||
|
|
// 通过 ref 调用组件方法
|
|||
|
|
componentRef.current?.updateData?.(
|
|||
|
|
{ theme: 'light' },
|
|||
|
|
{ items: [4, 5, 6] }
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Button onClick={handleUpdate}>更新组件数据</Button>
|
|||
|
|
<CloudComponent
|
|||
|
|
from="https://example.com/my-component.js"
|
|||
|
|
componentKey="my-component"
|
|||
|
|
componentRef={componentRef}
|
|||
|
|
/>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用 initialize
|
|||
|
|
|
|||
|
|
当 `initialize` 为 `true` 时，组件会在挂载时自动调用 `updateData` 方法初始化 settings 和 dataSource：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
function MyPage() {
|
|||
|
|
return (
|
|||
|
|
<CloudComponent
|
|||
|
|
from="https://example.com/my-component.js"
|
|||
|
|
componentKey="my-component"
|
|||
|
|
initialize={true}
|
|||
|
|
componentProps={{
|
|||
|
|
settings: { theme: 'dark' },
|
|||
|
|
dataSource: { items: [] }
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用 headers（需要认证的资源）
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
function MyPage() {
|
|||
|
|
return (
|
|||
|
|
<CloudComponent
|
|||
|
|
from="https://example.com/my-component.js"
|
|||
|
|
componentKey="my-component"
|
|||
|
|
headers={{
|
|||
|
|
'Authorization': 'Bearer token123',
|
|||
|
|
'X-Custom-Header': 'value'
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用 cache 策略
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
function MyPage() {
|
|||
|
|
return (
|
|||
|
|
<CloudComponent
|
|||
|
|
from="https://example.com/my-component.js"
|
|||
|
|
componentKey="my-component"
|
|||
|
|
cache="no-cache" // 不使用缓存，每次都重新加载
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|