HarmonyOS 鸿蒙Next arkTs如何写装饰器 对页面组件进行扩展 把一些公用方法扩展给组件

HarmonyOS 鸿蒙Next arkTs如何写装饰器 对页面组件进行扩展 把一些公用方法扩展给组件

@Entry @Component struct Index { @State message: string = ‘Hello World’; }

写个装饰器对该组件功能进行扩展、比如增加一个公共方法，获取url的参数

4 回复

目前的版本不能做到每个页面共用定义的方法，等后续版本的更新

更多关于HarmonyOS 鸿蒙Next arkTs如何写装饰器 对页面组件进行扩展 把一些公用方法扩展给组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


像这种?

我想给每个页面提供自己定义的toast方法。toast有页面元素。我想在你页面组件的基础上，添加页面元素 和促发方法。这些在react里很好实现，但是基于arkTs，没法扩展。

类似于高阶组件， 我要在你的页面组件上扩展一层，增加dom元素，和方法，

在HarmonyOS鸿蒙Next中，使用ArkTS编写装饰器对页面组件进行扩展，可以通过定义装饰器函数来实现。装饰器本质上是一个高阶函数，它接收目标组件作为参数，并返回一个新的组件，从而实现对组件的扩展。

假设你有一个公用方法 commonMethod，你希望将其扩展到多个页面组件中。首先，定义这个公用方法：

function commonMethod() {
    console.log("This is a common method.");
}

接下来，定义一个装饰器函数 withCommonMethod，它接收一个组件作为参数，并返回一个新的组件，该组件包含了 commonMethod 方法：

function withCommonMethod(Component) {
    return class extends Component {
        commonMethod = commonMethod;
    };
}

然后，你可以使用这个装饰器来扩展你的页面组件。例如，假设你有一个页面组件 MyPage：

@withCommonMethod
class MyPage extends Component {
    render() {
        return (
            <div>
                <button onClick={this.commonMethod}>Click Me</button>
            </div>
        );
    }
}

在这个例子中，MyPage 组件通过 withCommonMethod 装饰器扩展了 commonMethod 方法。你可以在 MyPage 组件中直接使用 this.commonMethod 来调用这个公用方法。

通过这种方式，你可以将一些公用的方法或逻辑通过装饰器的方式扩展到多个页面组件中，从而提高代码的复用性和可维护性。

回到顶部