JSX code

This is a universal source code component that allows quick integration of external components, such as third-party open-source libraries like TDesign and Antd. It can configure various components including watermark, step bar, cascader, rating, slider, etc.

Applicable Scenarios

When the components in the official component library do not meet your requirements, you can use this component to implement:

• This component is source code-based and requires you to learn and master React JSX syntax. Recommended for front-end developers.

• Before use, verify whether the third-party library supports CDN file inclusion. If CDN is not supported, it is unavailable.

  Note: Only component libraries introduced via CDN files are supported; NPM package introduction is not currently supported. For NPM package introduction, please use Local Custom Component Libraries.

Basic Features

1. Template

This component provides several common chart templates, such as TD watermark, grammar example, step bar, etc.

2. Code Syntax

2.1 Use Platform Variables and Methods

You can primarily access platform variables and methods through props.$w. For additional methods, refer to the platform API documentation.

Example: Get currently logged-in user information

$w.auth.currentUser.name;

Example: Call platform methods

$w.utils.setClipboardData({
  data: 'Copy content to clipboard',
});

Example: Accessing and Assigning Page Variables

$w.page.dataset.state.xxx; // Get variable value, xxx is the variable name
$w.page.dataset.state.xxx = 123; // Assign variable value, xxx is the variable name

2.2 Slot Declaration and Usage

A slot is a placeholder, and components can be dragged into the slot on the platform. For example, dragging a 'data table' component inside the watermark.

Usage path:

1. Declare a slot: In the advanced properties, add a slot and define its name and slot ID.
2. In JSX code, place the slot in the specified location using {props.slotId}

2.3 Style Configuration

• Get the style configured in the Style panel on the right via props.style, then apply it to the component you want to control.

• Define a style variable within the function to control styles in the code

• Use page or globally defined className for batch style control of components

2.4 Formatting Code

Format the code by right-clicking or using shortcut keys, as follows:

3. How to Integrate Third-Party Component Libraries

3.1 Steps to Import Third-Party Libraries

The following examples, using TDesign and Antd, demonstrate how to quickly integrate third-party component libraries:

1. First, import the dependency files and add the JS and CSS to "Application Settings-Development Settings"

2. Then, follow the third-party library's instructions to access global variables and write component code.

Note 1: Only component libraries introduced via CDN files are supported; NPM package import is not currently supported. For NPM package import, please use Local Custom Component Libraries.

Note 2: After CDN inclusion, import syntax is not supported. Follow the third-party platform's instructions to access components using global variables such as window.TDesign.Button. For details, refer to the CDN inclusion usage on the third-party official website.

3.2 Example: Integrating the Antd Component Library

1. First, import the dependencies by copying the browser import links for the Antd component library (note the import order: dayjs must be imported before antd), as follows:

https://cdnjs.cloudflare.com/ajax/libs/antd/5.8.5/reset.min.css
https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.9/dayjs.min.js
https://cdnjs.cloudflare.com/ajax/libs/antd/5.8.5/antd.min.js

The links are obtained from the official documentation. For reference, see Antd Browser Introduction

2. In WeDa, under "Application Settings-Development Settings-Loading External Resources", add the JS and CSS files for third-party libraries.

3. Then, access the component library via the global antd object, as demonstrated in the following TDesign Watermark Component example:

export default function JSX(props: JSXCompProps) {
  const { $w, contentSlot1, style } = props;
  const { Watermark } = antd;
  return (
    <Watermark content={$w.auth.currentUser.name} style={style}>
      <div style={{ minHeight: 300 }}>{contentSlot1}</div>
    </Watermark>
  );
}

Effect Preview:

3.3 Example: Integrating the TDesign Component Library

1. First, import the dependencies by copying the browser import links for the TDesign component library, as follows:

https://unpkg.com/tdesign-react@1.2.4/dist/tdesign.min.js
https://unpkg.com/tdesign-react@1.2.4/dist/tdesign.min.css

The links are obtained from the official documentation. For reference, see TDesign Browser Installation

2. In WeDa, under "Application Settings-Development Settings", add the JS and CSS files for third-party libraries.

3. Then, access the component library via the global window.Tdesign object, as demonstrated in the following TDesign Watermark Component example:

export default function JSX(props: JSXCompProps) {
  const { $w, contentSlot1, style } = props;
  const { Watermark } = window.TDesign;
  return (
    <Watermark
      watermarkContent={{ text: $w.auth.currentUser.name }}
      style={style}
    >
      <div style={{ minHeight: 300 }}>{contentSlot1}</div>
    </Watermark>
  );
}

You can preview the effect in the editor.

Frequently Asked Questions

What is the relationship between JSX components and local custom components?

The local custom component library is a method for developing custom components locally.

Type	JSX Component	Local Custom Component
Applicable Scenarios	Lightweight Code Scenarios	Complex Code Scenarios
Development Method	WeDa Editor	Local Editor Vscode
NPM Installation Support	Not Supported	Supported
Syntax Support	React Only	React,Vue,WXML
Mini Program Support	Not Supported	Supported
Component Configuration Area Customization	Not Supported	Supported

Local Custom Component Library Development Documentation

Property Description

组件接收的外部传入的属性

属性名	属性标识	类型	说明

代码块	jsxCode	string	遵循 JSX 语法，可快速地引入第三方库。注意：暂不支持NPM引入，需通过 JS 和 CSS 文件方式引入。使用指引
声明组件插槽	slotList	array	声明的插槽可往代码块中拖入其他组件。使用时，在JSX代码中通过 {props.插槽ID} 将放入插槽。详见文档 示例：[]
模板示例	template	string	注意：1. 以TD-和Antd-开头的模板，可分别引入TDesign开源组件库和Antd开源组件库，使用前请先按引入第三方库依赖说明，添加依赖的JS和CSS文件。 模板示例 示例："example"