React API

API 索引

• createReactAdapter()：创建 React 挂载 adapter
• ReactAdapterError：React 挂载错误
• TypeScript 类型：React adapter 的公开类型

createReactAdapter()

创建用于挂载 React 组件的 Makoo adapter。

类型

function createReactAdapter(): ReactMountAdapter;

返回值

返回 ReactMountAdapter。

说明

adapter 使用 createRoot() 在任务的 mountPoint 中渲染组件，并把 makoo 作为组件 props 传入。任务卸载时调用 React root 的 unmount()。

挂载或卸载失败时抛出 ReactAdapterError。

示例

import { createMakoo, inject } from '@makoojs/core';
import { createReactAdapter } from '@makoojs/react';
import Panel from './Panel.tsx';

const makoo = createMakoo({
	adapters: [createReactAdapter()]
});

makoo.start([
	inject({ injectAt: '#app', artifact: Panel })
]);

ReactAdapterError

React adapter 挂载或卸载失败时使用的错误类，继承自 AdapterError。

类型

class ReactAdapterError extends AdapterError {
	constructor(
		message: string,
		issues?: MakooIssue[],
		code?: string,
		cause?: Error
	);
}

code 省略时使用 ErrorCode.ADAPTER_MOUNT_FAIL。

TypeScript 类型

ReactMountProps

React 根组件接收的 props。

type ReactMountProps = {
	makoo: MakooContext;
};

ReactMountArtifact

Makoo React adapter 可以挂载的组件类型。

type ReactMountArtifact =
	| ComponentType<ReactMountProps>
	| ExoticComponent<ReactMountProps>;

ReactMountRoot

type ReactMountRoot = Root;

ReactMountAdapter

type ReactMountAdapter = ResolvableMountAdapter<
	ReactMountArtifact,
	ReactMountRoot,
	undefined
>;

组件示例及 makoo prop 的接收方式见组件注入。Context 的完整方法见 MakooContext。