safety-eval-service-frontend/.cursor/skills/specs/13-云组件使用规范/06-高级用法/SKILL.md

name	description
jjb-cloud-component-advanced	定义 JJB 云组件高级用法。在使用 componentRef、initialize、headers、cache 策略时查阅。

云组件使用规范

高级用法

使用 componentRef

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：

function MyPage() {
  return (
    <CloudComponent
      from="https://example.com/my-component.js"
      componentKey="my-component"
      initialize={true}
      componentProps={{
        settings: { theme: 'dark' },
        dataSource: { items: [] }
      }}
    />
  );
}

使用 headers（需要认证的资源）

function MyPage() {
  return (
    <CloudComponent
      from="https://example.com/my-component.js"
      componentKey="my-component"
      headers={{
        'Authorization': 'Bearer token123',
        'X-Custom-Header': 'value'
      }}
    />
  );
}

使用 cache 策略

function MyPage() {
  return (
    <CloudComponent
      from="https://example.com/my-component.js"
      componentKey="my-component"
      cache="no-cache" // 不使用缓存，每次都重新加载
    />
  );
}