logologo
开始
手册
开发
插件
API
首页
English
简体中文
日本語
한국어
Español
Português
Deutsch
Français
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
开始
手册
开发
插件
API
首页
logologo
RunJS 概述
导入模块
容器内渲染

全局变量

window
document
navigator

ctx

ctx.blockModel
ctx.collection
ctx.collectionField
ctx.dataSource
ctx.dataSourceManager
ctx.element
ctx.exit()
ctx.exitAll()
ctx.filterManager
ctx.form
ctx.getModel()
ctx.getValue()
ctx.getVar()
ctx.i18n
ctx.importAsync()
ctx.initResource()
ctx.libs
ctx.location
ctx.logger
ctx.makeResource()
ctx.message
ctx.modal
ctx.model
ctx.notification
ctx.off()
ctx.on()
ctx.openView()
ctx.render()
ctx.request()
ctx.requireAsync()
ctx.resource
ctx.route
ctx.router
ctx.setValue()
ctx.sql
ctx.t()
ctx.view
Previous Page导入模块
Next Pagewindow

#容器内渲染

使用 ctx.render() 将内容渲染到当前容器(ctx.element)中,支持以下三种形式:

#ctx.render()

#渲染 JSX

ctx.render(<button>Button</button>);

#渲染 DOM 节点

const div = document.createElement('div');
div.innerHTML = 'Hello World';
ctx.render(div);

#渲染 HTML 字符串

ctx.render('<h1>Hello World</h1>');

#JSX 说明

RunJS 可直接渲染 JSX,既可以使用内置 React/组件库,也可以按需加载外部依赖。

#使用内置 React 与组件库

const { Button } = ctx.libs.antd;

ctx.render(<Button>Click</Button>);

#使用外部 React 与组件库

通过 ctx.importAsync() 按需加载指定版本:

const React = await ctx.importAsync('react@19.2.4');
const { Button } = await ctx.importAsync('antd@6.2.2?bundle');

ctx.render(<Button>Click</Button>);

适合需要特定版本或第三方组件的场景。

#ctx.element

不推荐的用法(已废弃):

ctx.element.innerHTML = '<h1>Hello World</h1>';

推荐的方式:

ctx.render(<h1>Hello World</h1>);