safety-eval-service-frontend/.cursor/skills/specs/13-云组件使用规范/09-完整示例/SKILL.md

name	description
jjb-cloud-component-full-example	定义 JJB 云组件完整使用示例。在需要整合生命周期、ref、依赖、缓存等完整用法时查阅。

云组件使用规范

完整示例

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;