自定义组件

您可以在 Toolpad Studio 编辑器中引入您自己的自定义组件。

以下步骤说明如何在 Toolpad Studio 中创建和使用自定义组件。

创建组件

将鼠标悬停在组件库上以打开它。
在自定义组件部分中，单击创建。
在打开的对话框中，为您的组件提供一个名称。单击创建以初始化新组件。
在出现的 snackbar 中，单击打开按钮。您的代码编辑器将打开并显示新创建的组件。

添加组件代码

Toolpad Studio 公开了一个 createComponent 函数。这用于向 Toolpad Studio 发出信号，表明哪些组件可以导入以及它应如何解释属性。

import * as React from 'react';
import { createComponent } from '@toolpad/studio/browser';

export interface HelloWorldProps {
  msg: string;
}

function HelloWorld({ msg }: HelloWorldProps) {
  return <div>{msg}</div>;
}

export default createComponent(HelloWorld, {
  argTypes: {
    msg: {
      type: 'string',
      default: 'Hello world!',
    },
  },
});

在 argTypes 对象中定义的 props 在检查自定义组件时可用作可编辑属性

组件库

自定义组件在组件库中变为可用，同时提供创建新组件的选项。要使用自定义组件，请将其从组件库拖到画布中。该组件将在 自定义组件 部分下可用。

操作外部状态

如上一节所示，属性可以充当组件的输入。但这不一定止步于此，您可以将某些属性定义为输入/输出，并使其值与页面状态自动同步。例如，内置的 TextField 组件就是这样工作的。

要将更改写回属性，您必须在组件上定义一个辅助属性，该属性充当 onChange 处理程序。然后，在参数类型中添加 onChangeProp 属性，以将两个属性连接为输入/输出。

import * as React from 'react';
import { createComponent } from '@toolpad/studio/browser';

export interface HelloWorldProps {
  msg: string;
  onMsgChange: (newMsg: string) => void
}

function HelloWorld({ msg, onMsgChange }: HelloWorldProps) {
  return <input value={msg} onChange={event => onMsgChange(event.target.value)} />;
}

export default createComponent(HelloWorld, {
  argTypes: {
    msg: {
      type: 'string',
      default: 'Hello world!',
      onChangeProp: 'onMsgChange'
    },
  },
});

此组件拖到画布时，具有一个 msg 属性，您无法将其绑定到。但是您现在可以从其他组件绑定到此属性。