safety-eval-service-frontend/.cursor/skills/specs/13-云组件使用规范/02-基础用法/SKILL.md

name	description
jjb-cloud-component-basic-usage	定义 JJB 云组件基础用法。在使用 CloudComponent 进行简单加载或带生命周期钩子时查阅。

云组件使用规范

基础用法

最简单的使用

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
      }}
    />
  );
}

带生命周期钩子的使用

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('组件已销毁');
      }}
    />
  );
}