66 lines
1.4 KiB
Markdown
66 lines
1.4 KiB
Markdown
|
---
|
||
|
|
name: jjb-cloud-component-basic-usage
|
||
|
|
description: 定义 JJB 云组件基础用法。在使用 CloudComponent 进行简单加载或带生命周期钩子时查阅。
|
||
|
|
---
|
||
|
|
|
||
|
|
# 云组件使用规范
|
||
|
|
|
||
|
|
## 基础用法
|
||
|
|
|
||
|
|
## 最简单的使用
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
import React from 'react';
|
||
|
|
import CloudComponent from '@cqsjjb/jjb-cloud-component/CloudComponent';
|
||
|
|
|
||
|
|
function MyPage() {
|
||
|
|
return (
|
||
|
|
<CloudComponent
|
||
|
|
from="https://example.com/my-component.js"
|
||
|
|
componentKey="my-component"
|
||
|
|
componentProps={{
|
||
|
|
title: "Hello World",
|
||
|
|
count: 42
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 带生命周期钩子的使用
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
import React from 'react';
|
||
|
|
import CloudComponent from '@cqsjjb/jjb-cloud-component/CloudComponent';
|
||
|
|
|
||
|
|
function MyPage() {
|
||
|
|
return (
|
||
|
|
<CloudComponent
|
||
|
|
from="https://example.com/my-component.js"
|
||
|
|
componentKey="my-component"
|
||
|
|
componentProps={{
|
||
|
|
title: "Hello World",
|
||
|
|
count: 42
|
||
|
|
}}
|
||
|
|
onLoadStart={() => {
|
||
|
|
console.log('开始加载云组件');
|
||
|
|
}}
|
||
|
|
onLoadEnd={() => {
|
||
|
|
console.log('云组件加载完成');
|
||
|
|
}}
|
||
|
|
onMounted={(key, ref) => {
|
||
|
|
console.log(`组件 ${key} 已挂载`);
|
||
|
|
// 可以调用组件方法
|
||
|
|
ref.updateData?.({ theme: 'dark' });
|
||
|
|
}}
|
||
|
|
onUpdated={(key, ref) => {
|
||
|
|
console.log(`组件 ${key} 已更新`, ref);
|
||
|
|
}}
|
||
|
|
onDestroy={() => {
|
||
|
|
console.log('组件已销毁');
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
```
|