自定义场景对象
场景旨在具有可扩展性。除了库原语之外，您还可以构建自己的自定义场景对象，以扩展库的基本功能。本主题描述了如何创建自定义对象。
创建自定义场景对象
按照以下步骤创建自定义场景对象。
步骤 1. 定义自定义对象的州类型
首先定义自定义对象的州类型。此接口必须扩展 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> 类型作为属性
function CounterRenderer(props: SceneComponentProps<Counter>) {
return <div>Counter</div>;
}
使用 static Component 属性为 Counter 自定义对象设置渲染器
export class Counter extends SceneObjectBase<CounterState> {
static Component = CounterRenderer;
}
步骤 4. 在渲染器中使用自定义对象状态
使用传递给组件的 model 属性，并使用 model.useState() 钩子订阅其状态。对象状态的任何更改都将重新渲染组件
function CounterRenderer({ model }: SceneComponentProps<Counter>) {
const { count } = model.useState();
return (
<div>
<div>Counter: {count}</div>
</div>
);
}
步骤 5. 从组件中修改自定义对象的状态
在自定义场景对象中定义状态修改方法（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(),
}),
],
}),
});