createComponent

构建自定义组件并暴露给 Toolpad Studio。

导入

import { createComponent } from '@toolpad/studio/browser';

按照惯例，Toolpad Studio 自定义组件放置在 toolpad/components/ 文件夹中。此文件夹中的每个文件描述一个自定义 Toolpad Studio 组件。只要该文件在其默认导出中导出一个有效的自定义组件，它就可以在 Toolpad Studio 中使用于 UI。createComponent 函数将额外的信息附加到 React 组件，以向 Toolpad Studio 发出信号，说明它们如何被使用和组合在一起。

export default createComponent(MyComponent, config);

参数

MyComponent 要提供给 Toolpad Studio 的 React 组件。
config 一个描述此组件在 Toolpad Studio 中的功能的对象。请参阅 ComponentConfig

返回值

一个 React 组件，它将在拖放编辑器中可用，并具有定义的 argTypes 作为其属性。

类型

ComponentConfig

描述自定义组件。

属性

名称	类型	描述
`helperText?`	`string`	一段简短的解释性文本，当引用此组件时，将显示在编辑器 UI 中。可能包含 Markdown。
`errorProp?`	`string`	将一个属性指定为错误属性。如果 Toolpad Studio 检测到任何输入存在错误，它将把错误转发到此属性。
`errorPropSource?`	`string[]`	配置哪些属性导致将错误状态传播到 `errorProp`。
`loadingProp?`	`string`	将一个属性指定为加载属性。如果 Toolpad Studio 检测到任何输入仍在加载，它会将此属性设置为 `true`。
`loadingPropSource?`	`string[]`	配置哪些属性导致将加载状态传播到 `loadingProp`。
`layoutDirection?`	`'vertical' \| 'horizontal' \| 'both'`	启用控制组件容器框的对齐方式。
`resizableHeightProp?`	`string`	将一个属性指定为可调整高度属性。如果 Toolpad Studio 检测到组件的任何垂直调整大小，它将把调整大小转发到此属性。
`argTypes?`	`{ [name: string]: ArgumentType }`	描述此组件的各个属性。请参阅 ArgumentType。

ArgumentType

参数类型描述了自定义组件属性的类型和约束。它们是具有 type 属性的对象。

属性

名称	类型	描述
`type?`	`'string' \| 'number' \| 'boolean' \| 'object' \| 'array' \| 'element' \| 'event' \| 'template'`	描述属性的类型。
`default?`	`any`	属性的默认值。
`helperText?`	`string`	一段简短的解释性文本，当引用此属性时，将显示在编辑器 UI 中。可能包含 Markdown。
`label?`	`string`	在编辑器中用于 UI 目的，以代替属性名称。
`description?`	`string`	属性的描述，用于向用户提供额外信息。
`defaultValueProp?`	`string`	将提供默认值的属性。
`onChangeProp?`	`string`	用于控制此属性的属性。
`onChangeHandler?`	`(...params: any[]) => any`	提供了一种在将来自 onChange 事件的值分配给状态之前对其进行操作的方法。
`visible?`	`boolean`	对于复合组件，此属性用于根据另一个属性的选定值来控制此属性的可见性。如果未定义此属性，则该属性将始终可见。
`enum?`	`string[]`	仅适用于 `'string'` 类型。定义属性的一组有效值。
`minimum?`	`number`	仅适用于 `'number'` 类型。定义属性的最小允许值。
`maximum?`	`number`	仅适用于 `'number'` 类型。定义属性的最大允许值。