logologo
Démarrer
Manuel
Développement
Plugins
API
Accueil
English
简体中文
日本語
한국어
Español
Português
Deutsch
Français
Русский
Démarrer
Manuel
Développement
Plugins
API
Accueil
logologo
Présentation de RunJS
Importation de modules
Rendu dans le conteneur

Variables globales

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 PageImportation de modules
Next Pagewindow
Avis de traduction IA

Ce document a été traduit par IA. Pour des informations précises, veuillez consulter la version anglaise.

#Rendu dans le conteneur

Utilisez ctx.render() pour effectuer le rendu du contenu dans le conteneur actuel (ctx.element). Il prend en charge les trois formes suivantes :

#ctx.render()

#Rendu de JSX

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

#Rendu de nœuds DOM

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

#Rendu de chaînes HTML

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

#Description du JSX

RunJS peut effectuer le rendu du JSX directement. Vous pouvez utiliser les bibliothèques React/composants intégrées ou charger des dépendances externes à la demande.

#Utilisation de React et des bibliothèques de composants intégrées

const { Button } = ctx.libs.antd;

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

#Utilisation de React et des bibliothèques de composants externes

Chargez des versions spécifiques à la demande via 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>);

Adapté aux scénarios nécessitant des versions spécifiques ou des composants tiers.

#ctx.element

Utilisation non recommandée (obsolète) :

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

Méthode recommandée :

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