Learn how to configure the propTypes definition of a custom component, and how declaring configurable properties improves flexibility and adapts the component to business needs.
Custom components support property definitions (propTypes), which enrich a component at the property level. Adding custom properties increases customizability, making the component more flexible and better aligned with business requirements, as shown below:To manage component properties, click Add Item to add a property, Edit to modify one, or Delete to remove one. Click Edit to view all configuration items for a component property, as shown below.You can view and configure all custom component property definitions on the Component Preview page (for debugging simple property types) or after installing the component in an app (for complex property configuration, including code-level debugging), as shown below.Detailed descriptions of each configuration item are provided below.
The property title configured for a custom component. The default value is “Property Title”. A clear and intuitive title helps users better understand the property or identify the content they need to enter.When this component is used on a page, it appears as shown below:
The property name of a component is the property Key, similar to props.xxx in a class. The default value is propName. You can bind variables in Page Design to control the component. For example, the property value of a custom component can be used as the title of a component nested within it, as shown below.
Note: The property name of a component cannot be empty; otherwise, an error occurs when the property is called or assigned a value.
The property types of a component are similar to common data types. There are seven types: Text, boolean, Number, object, array, Function, and Element. Each data type maps to several setters that meet users’ needs for processing data across different dimensions, as shown below.
Components with different property types have different setters, which support different rendering and data-processing methods. For example, the Text type corresponds to five setters, as shown below.
Developer Guide