全代码组件

全代码组件是JitAi开发框架中的通用自定义组件，支持开发者使用React和JavaScript编写完全自定义的组件实现。它提供完整的组件生命周期管理、事件发布订阅、变量管理和配置管理能力，同时集成错误边界保护确保组件渲染稳定性。

全代码组件元素分层结构为Meta（components.Meta） → Type（components.BlankComponent） → 实例，开发者可通过JitAI的可视化开发工具快捷地创建全代码组件实例元素。

当然，开发者也可以创建自己的Type元素，或者在自己的App中改写JitAi官方提供的components.BlankComponentType元素，以实现自己的封装。

快速开始

基础配置示例

BlankComponent.tsx

import { Jit } from 'jit';
import { Button, message } from 'antd';

// 自定义渲染器 - React组件
const Render = (props) => {
    const compIns = props.compIns;

    const handleClick = () => {
        // 调用组件方法
        message.success(compIns.getData());
        
        // 触发自定义事件
        compIns.publishEvent('handleClickMe');
    };

    return (
        <div style={{ textAlign: 'center', marginTop: '100px' }}>
            <Button type="primary" onClick={handleClick}>
                Click Me!
            </Button>
        </div>
    );
};

// 组件逻辑处理类
export default class BlankComponent extends Jit.BaseComponent {
    // 挂载渲染器
    Render = Render;

    /**
     * 获取数据的自定义方法
     */
    getData() {
        return 'Hello from BlankComponent!';
    }
}

配置属性说明

属性名	类型	必填	默认值	说明
name	string	是	-	组件实例名称，页面内唯一
title	string	否	""	组件显示标题
showTitle	boolean	否	false	是否显示组件标题
config.requireElements	array	否	[]	组件依赖的元素配置

变量

全代码组件支持通过重写静态方法getVariableList()来定义组件变量，变量会自动初始化并绑定到组件实例。

定义组件变量

export default class BlankComponent extends Jit.BaseComponent {
    static getVariableList(config) {
        return [
            {
                name: 'userInput',
                title: '用户输入',
                dataType: 'Stext',
                value: ''
            },
            {
                name: 'counter', 
                title: '计数器',
                dataType: 'Numeric',
                value: 0
            }
        ];
    }
}

方法

publishEvent

发布自定义事件，支持页面或其他组件订阅。

参数详解

参数名	类型	必填	说明
name	string	是	事件名称
ex	Record<string, any>	否	事件数据

返回值

Promise<void>

使用示例

发布事件

// 发布简单事件
this.publishEvent('dataChanged');

// 发布带数据的事件
this.publishEvent('userSelected', {
    userId: 123,
    userName: 'Alice'
});

subscribeEvent

订阅事件，接收其他组件或页面发布的事件。

参数详解

参数名	类型	必填	说明
name	string	是	事件名称
evtCb	(data: any) => Promise<void> | void	是	事件回调函数
unSubscribeExist	boolean	否	是否取消已存在的订阅，默认true

返回值

string - 订阅处理器ID

使用示例

订阅事件

// 订阅事件
const handlerId = this.subscribeEvent('dataChanged', async (data) => {
    console.log('接收到数据变更:', data);
    // 处理事件逻辑
});

// 同步事件处理
this.subscribeEvent('userClicked', (data) => {
    this.setState({ selectedUser: data.userId });
});

unSubscribeEvent

取消事件订阅。

参数详解

参数名	类型	必填	说明
id	string	是	订阅处理器ID

使用示例

取消订阅

const handlerId = this.subscribeEvent('myEvent', handler);
// 取消订阅
this.unSubscribeEvent(handlerId);

setConfig

更新组件配置。

参数详解

参数名	类型	必填	说明
next	Partial<T & {requireElements: requireElement[]}>	是	新配置
clean	boolean	否	是否完全替换配置，默认false

使用示例

更新配置

// 部分更新配置
this.setConfig({
    title: '新标题',
    showTitle: true
});

// 完全替换配置
this.setConfig({
    requireElements: [],
    customOption: 'value'
}, true);

newVariable

创建新的数据类型变量实例。

参数详解

参数名	类型	必填	说明
varConfig	DataTypeConfig	是	变量配置对象

使用示例

创建变量

const textVar = this.newVariable({
    name: 'dynamicText',
    title: '动态文本',
    dataType: 'Stext',
    value: 'initial value'
});

runCode

在页面上下文中执行代码字符串。

参数详解

参数名	类型	必填	说明
code	string	是	要执行的代码字符串

使用示例

执行代码

// 执行简单表达式
const result = this.runCode('1 + 2');

// 执行复杂逻辑
this.runCode(`
    if (self.dataList.length > 0) {
        self.showMessage('数据已加载');
    }
`);

getPermConfig

获取组件的权限配置。

返回值

Record<string, any> | undefined

使用示例

权限检查

const permConfig = this.getPermConfig();
if (permConfig?.visible !== false) {
    // 组件可见时的逻辑
}

bindApp

绑定应用实例到组件。

参数详解

参数名	类型	必填	说明
app	App	是	应用实例

使用示例

绑定应用

// 手动绑定应用实例
this.bindApp(app);

bindPage

绑定页面实例到组件，同时为组件变量绑定页面上下文。

参数详解

参数名	类型	必填	说明
page	BasePage	是	页面实例

使用示例

绑定页面

// 手动绑定页面实例
this.bindPage(page);

getEventKey

获取组件事件的唯一标识键。

参数详解

参数名	类型	必填	说明
eventName	string	是	事件名称

返回值

string - 事件唯一标识键

使用示例

获取事件键

const eventKey = this.getEventKey('dataChanged');
// 返回格式: "{uuid}.{componentName}.{eventName}"

initVariables

根据变量配置列表初始化组件变量。

参数详解

参数名	类型	必填	说明
dataTypeList	BaseDataType[]	是	数据类型配置列表

使用示例

初始化变量

// 通常在构造函数中自动调用
const variables = [
    { name: 'userInput', dataType: 'Stext', value: '' }
];
this.initVariables(variables);

destroy

销毁组件，清理资源和事件监听器。

使用示例

组件销毁

// 组件卸载时自动调用
componentWillUnmount() {
    this.destroy();
}

属性

name

组件实例名称。

• 类型: string
• 只读: 是

title

组件显示标题。

• 类型: string
• 只读: 否

config

组件配置对象。

• 类型: T & {requireElements: requireElement[]}
• 只读: 否

showTitle

是否显示组件标题。

• 类型: boolean
• 只读: 否

type

组件类型标识。

• 类型: string
• 只读: 是

app

当前应用实例。

• 类型: App
• 只读: 是

page

所属页面实例。

• 类型: BasePage
• 只读: 是

compType

组件类型枚举值。

• 类型: COMPONENT_TYPE
• 只读: 是
• 可能值: NORMAL, LAYOUT, REFERENCE

fullName

组件的完整名称标识。

• 类型: string
• 只读: 是

dataTypeList

组件的数据类型配置列表。

• 类型: BaseDataType[]
• 只读: 是

事件

全代码组件支持通过重写静态方法getEventList()来定义组件支持的事件类型。

定义组件事件

export default class BlankComponent extends Jit.BaseComponent {
    static getEventList() {
        return [
            {
                name: 'dataLoaded',
                title: '数据加载完成'
            },
            {
                name: 'userAction',
                title: '用户操作'
            }
        ];
    }

    // 组件方法定义
    static getFuncList() {
        return [
            {
                name: 'getData',
                title: '获取数据',
                args: [],
                returnType: 'string'
            }
        ];
    }
}

高级特性

错误边界保护

全代码组件自动集成React错误边界，当自定义代码发生渲染错误时显示友好的错误提示。

错误处理

// 组件渲染错误时自动显示
<Alert.ErrorBoundary message="自定义代码渲染失败">
    <compIns.Render compIns={compIns} />
</Alert.ErrorBoundary>

生命周期集成

全代码组件完全集成到极态平台的组件生命周期管理中。

生命周期处理

export default class BlankComponent extends Jit.BaseComponent {
    constructor(componentInfo) {
        super(componentInfo);
        // 组件初始化逻辑
    }

    componentDidMount() {
        // 组件挂载后的逻辑
        this.bindApp(this.app);
        this.bindPage(this.page);
    }

    componentWillUnmount() {
        // 组件卸载前的清理
        this.destroy();
    }
}

权限控制集成

全代码组件支持极态平台的权限控制体系。

权限控制

const Render = (props) => {
    const { compIns } = props;
    const permConfig = compIns.getPermConfig();
    
    // 根据权限配置控制显示
    if (permConfig?.visible === false) {
        return null;
    }
    
    return (
        <div>
            <Button 
                disabled={permConfig?.editable === false}
                onClick={compIns.handleAction}
            >
                操作按钮
            </Button>
        </div>
    );
};