80 lines
2.1 KiB
Markdown
80 lines
2.1 KiB
Markdown
|
---
|
||
|
|
name: jjb-cloud-component-full-example
|
||
|
|
description: 定义 JJB 云组件完整使用示例。在需要整合生命周期、ref、依赖、缓存等完整用法时查阅。
|
||
|
|
---
|
||
|
|
|
||
|
|
# 云组件使用规范
|
||
|
|
|
||
|
|
## 完整示例
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
import React, { useState, useContext } from 'react';
|
||
|
|
import { Spin, Button, message } from 'antd';
|
||
|
|
import CloudComponent from '@cqsjjb/jjb-cloud-component/CloudComponent';
|
||
|
|
import { InjectContext } from '~/enumerate/context';
|
||
|
|
|
||
|
|
function MyPage() {
|
||
|
|
const context = useContext(InjectContext);
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
const componentRef = React.useRef();
|
||
|
|
|
||
|
|
const handleUpdate = () => {
|
||
|
|
componentRef.current?.updateData?.(
|
||
|
|
{ theme: 'light', language: 'zh-CN' },
|
||
|
|
{ items: [1, 2, 3, 4, 5] }
|
||
|
|
);
|
||
|
|
context.message.success('组件数据已更新');
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Button onClick={handleUpdate} style={{ marginBottom: 16 }}>
|
||
|
|
更新组件数据
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
{loading && <Spin />}
|
||
|
|
|
||
|
|
<CloudComponent
|
||
|
|
from="https://example.com/my-component.js"
|
||
|
|
componentKey="my-component-unique-key"
|
||
|
|
componentProps={{
|
||
|
|
title: "我的云组件",
|
||
|
|
count: 42
|
||
|
|
}}
|
||
|
|
dependencies={{
|
||
|
|
lodash: require('lodash')
|
||
|
|
}}
|
||
|
|
cache="force-cache"
|
||
|
|
headers={{
|
||
|
|
'Authorization': 'Bearer token123'
|
||
|
|
}}
|
||
|
|
initialize={true}
|
||
|
|
componentRef={componentRef}
|
||
|
|
onLoadStart={() => {
|
||
|
|
setLoading(true);
|
||
|
|
console.log('开始加载云组件');
|
||
|
|
}}
|
||
|
|
onLoadEnd={() => {
|
||
|
|
setLoading(false);
|
||
|
|
console.log('云组件加载完成');
|
||
|
|
}}
|
||
|
|
onMounted={(key, ref) => {
|
||
|
|
console.log(`组件 ${key} 已挂载`);
|
||
|
|
if (ref.formItems) {
|
||
|
|
console.log('表单配置:', ref.formItems);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onUpdated={(key, ref) => {
|
||
|
|
console.log(`组件 ${key} 已更新`, ref);
|
||
|
|
}}
|
||
|
|
onDestroy={() => {
|
||
|
|
console.log('组件已销毁');
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MyPage;
|
||
|
|
```
|