自定义场景对象
Scenes 秉承可扩展性的理念。除了库原语之外，您还可以构建自己的自定义场景对象，以扩展库的基本功能。本主题介绍如何创建自定义对象。
创建自定义场景对象
请按照以下步骤创建自定义场景对象。
步骤 1. 定义自定义对象的 state 类型
首先为您的自定义对象定义 state 类型。此接口必须扩展 SceneObjectState 接口
interface CounterState extends SceneObjectState {
count: number;
}
步骤 2. 实现自定义对象类
为自定义场景对象实现一个类。此类必须扩展 SceneObjectBase 类
export class Counter extends SceneObjectBase<CounterState> {
public constructor(state?: Partial<CounterState>) {
super({ count: 0, ...state });
}
}
步骤 3. 实现自定义对象渲染器
实现一个 React 组件，当在场景中使用自定义对象时将显示此组件。此组件必须使用 SceneComponentProps<T extends SceneObjectBase> 类型作为 props
function CounterRenderer(props: SceneComponentProps<Counter>) {
return <div>Counter</div>;
}
使用 static Component 属性为 Counter 自定义对象设置渲染器
export class Counter extends SceneObjectBase<CounterState> {
static Component = CounterRenderer;
}
步骤 4. 在渲染器中使用自定义对象 state
使用传递给组件的 model 属性，并使用 model.useState() 钩子订阅其 state。对象 state 的任何更改都将重新渲染组件
function CounterRenderer({ model }: SceneComponentProps<Counter>) {
const { count } = model.useState();
return (
<div>
<div>Counter: {count}</div>
</div>
);
}
步骤 5. 从组件修改自定义对象的 state
在自定义场景对象中定义 state 修改方法 (onIncrement)
export class Counter extends SceneObjectBase<CounterState> {
public static Component = CounterRenderer;
public onIncrement = () => {
this.setState({ count: this.state.count + 1 });
};
}
在渲染器中使用 onIncrement 方法
function CounterRenderer({ model }: SceneComponentProps<Counter>) {
const { count } = model.useState();
return (
<div>
<div>Counter: {count}</div>
<button onClick={model.onIncrement}>Increment counter</button>
</div>
);
}
步骤 6. 在场景中使用自定义对象
现在，您的自定义场景对象 Counter 已准备好用于场景中。创建一个使用它的场景
const myScene = new EmbeddedScene({
body: new SceneFlexLayout({
children: [
new SceneFlexItem({
body: new Counter(),
}),
],
}),
});