应用 Preact SDK

使用 Preact 构建自己的块

目录

• 安装
• 使用量
  • bootstrap()
  • useBlock()
  • <FormattedMessage />
• 许可证

安装

npm install @appsemble/preact preact

使用量

此软件包集成 预录 与 @appsemble/sdk请阅读文档 更了解如何使用它.

bootstrap()

拖曳函数将 Preact 组件作为参数并生成 。 它需要像样的东西 块上下文作为其道具,随 ready() 函数。 这个 ready() 函数需要 当块完成渲染时调用。 行动不会在页面上完成, 直到所有街区都准备好了.

import { bootstrap } from '@appsemble/preact';
import { useEffect } from 'preact/hooks';

bootstrap(({ actions }) => {
  useEffect(() => {
    ready();
  }, []);

  return (
    <button onClick={() => actions.onClick()} type="button">
      Hello world!
    </button>
  );
});

说明: 剧本只装入一次. 部件会被拖入每个实例 由应用程序创建者加载的块类型.

useBlock()

获取块背景。 用于在树下树下生产的组件 提供组件 bootstrap

import { useBlock } from '@appsemble/preact';
import { type VNode } from 'preact';

export function MyButton(): VNode {
  const { actions } = useBlock();

  return (
    <button onClick={() => actions.onClick()} type="button">
      Hello world!
    </button>
  );
}

<FormattedMessage />

此帮助组件会生成一个已翻译的消息ID .

import { FormattedMessage } from '@appsemble/preact';
import { type VNode } from 'preact';

interface MyButtonProps {
  readonly name: string;
}

export function MyButton({ name }: MyButtonProps): VNode {
  return (
    <button type="button">
      <FormattedMessage id="myButtonLabel" values={{ name }} />
    </button>
  );
}

许可证

LGPL-3.0 仅限 © 应用