gpt4 book ai didi

javascript - 如何用 HOC 包装每个导出的组件?

转载 作者:行者123 更新时间:2023-12-03 14:10:46 41 4
gpt4 key购买 nike

我需要向 所有我的React函数组件中添加添加 [data-test-id]属性以进行测试的可能性。为了实现这一点,我创建了 withTestId() HOC,它将可选的 prop testId 添加到包装组件中,并在定义时添加 [data-test-id] 最终 HTML。

所以当我定义组件时:

<ExampleComponent testId="example" />

它返回:

<div data-test-id="example" />

我遇到的唯一问题是将其应用于每个组件,而无需将其单独包装在每个组件中。因此,不要编写如下代码:

function ExampleComponent() { ... }

export default withTestId(ExampleComponent)

我想将所有导出内容包装在我的 index.ts 文件中,现在看起来像这样:

export { default as ExampleComponent } from "./ExampleComponent";
export { default as ExampleComponent2 } from "./ExampleComponent2";
...

我怎样才能实现这个目标?

最佳答案

我看到有两种方法可以做到这一点;一种动态方式,使库的用户代码变得更加复杂。您可以轻松地更改实现,而另一个实现则需要更多的样板代码,保持用户代码不变。

我还没有测试他们在捆绑代码时有关树摇动的行为。

在用户代码中使用析构

这允许在主组件导出文件中添加/删除内容,而不必担心库中的其他样板。高阶组件可以轻松打开/关闭。需要注意的是:用户代码需要使用解构来检索组件。

您的新 index.ts 文件将如下所示,而我已将您之前的 index.ts 文件称为 components.ts同一目录:

import * as RegularComponents from "./components";
import withTestId from "./with-test-id";

const WithTestIdComponents = Object
.keys(RegularComponents)
.reduce((testIdComps, key) => {
return {
...testIdComps,
[key]: withTestId(RegularComponents[key])
};
}, {});

export default WithTestIdComponents;

要在应用程序代码中使用它:

import MyComponents from "./components/tested";
const { Component1, Component2, Component3, Component4 } = MyComponents;

这使用default导出使其看起来像您将所有组件都放在一个位置,但由于您无法直接解构导出,因此您需要第二步从中获取正确的组件。

将样板添加到导出文件

由于有一个 index.ts 文件包含库中导出的所有组件,因此可以导入/重命名每个组件,并使用 withTestId 及其组件重新导出它们名称:

import withTestId from "./with-test-id";
import { default as TmpComponent1 } from "./component1";
import { default as TmpComponent2 } from "./component2";
import { default as TmpComponent3 } from "./component3";
import { default as TmpComponent4 } from "./component4";
export const Component1 = withTestId(TmpComponent1);
export const Component2 = withTestId(TmpComponent2);
export const Component3 = withTestId(TmpComponent3);
export const Component4 = withTestId(TmpComponent4);

这样,导入就可以像以前一样使用了:

import {
Component1,
Component2,
Component3,
Component4
} from "./components";

我认为使用 index 文件已经是某种样板文件,而这种方法增加了它。由于用户代码不需要任何更改,因此我更喜欢这种方法。

在我们的一个项目中,我们使用了自定义 takeoff每当我们生成新组件时,脚本都会为我们创建这种样板。

示例

这是一个code sandbox查看这两种方法。

关于javascript - 如何用 HOC 包装每个导出的组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60341598/

41 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com