https://github.com/epeejs/babel-plugin-taro-page-hoc
编译时添加自定义 HOC 包裹 Taro 页面组件
https://github.com/epeejs/babel-plugin-taro-page-hoc
babel-plugin hoc react tarojs
Last synced: 5 months ago
JSON representation
编译时添加自定义 HOC 包裹 Taro 页面组件
- Host: GitHub
- URL: https://github.com/epeejs/babel-plugin-taro-page-hoc
- Owner: epeejs
- Created: 2022-11-29T10:41:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-06T03:23:59.000Z (over 3 years ago)
- Last Synced: 2025-08-18T09:13:29.408Z (10 months ago)
- Topics: babel-plugin, hoc, react, tarojs
- Language: TypeScript
- Homepage:
- Size: 7.81 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# babel-plugin-taro-page-hoc
用于编译时给 Taro 页面包裹自定义高阶组件，实现页面渲染前置逻辑添加
例如自动登录等异步操作，解决入口组件（app.tsx）不能阻止子元素（this.props.children）渲染问题
```ts
// 例如页面 HomePage
import Taro from '@tarojs/taro';
const HomePage: Taro.FC = () => {
return
;
};
export default HomePage;
// 应用插件配置
// ["babel-plugin-taro-page-hoc", { "hocSource": "src/hoc" }]
// 输出
⬇️ ⬇️ ⬇️
import __hoc__ from 'src/hoc';
export default __hoc__(HomePage);
```
详细介绍文档 [如何解决 Taro 页面无法异步渲染问题](https://github.com/epeejs/daydayup/blob/main/docs/zjw/babel-plugin-taro-page-hoc.md)
## 安装
```sh
yarn add -D babel-plugin-taro-page-hoc
```
## 使用
.babelrc
```json
{
"plugins": [
[
"babel-plugin-taro-page-hoc",
{
"hocSource": "./src/hoc", // hoc 导入源，必填，为空时不执行转换
"hocName": "__hoc__" // 自定义 hoc 函数名，默认 __hoc__
}
]
]
}
```
## 部分页面排除转换
默认转换所有页面，如果部分页面不需要添加 hoc，可以通过在导出组件上添加注释 `@nohoc`
```ts
// @nohoc
export default HomePage;
```