Skip to content

epeejs/babel-plugin-taro-page-hoc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

babel-plugin-taro-page-hoc

用于编译时给 Taro 页面包裹自定义高阶组件,实现页面渲染前置逻辑添加

例如自动登录等异步操作,解决入口组件(app.tsx)不能阻止子元素(this.props.children)渲染问题

// 例如页面 HomePage
import Taro from '@tarojs/taro';

const HomePage: Taro.FC<HomePageProps> = () => {
  return <div></div>;
};

export default HomePage;

// 应用插件配置
// ["babel-plugin-taro-page-hoc", { "hocSource": "src/hoc" }]
// 输出

⬇️     ⬇️     ⬇️
import __hoc__ from 'src/hoc';
export default __hoc__(HomePage);

详细介绍文档 如何解决 Taro 页面无法异步渲染问题

安装

yarn add -D babel-plugin-taro-page-hoc

使用

.babelrc

{
  "plugins": [
    [
      "babel-plugin-taro-page-hoc",
      {
        "hocSource": "./src/hoc", // hoc 导入源,必填,为空时不执行转换
        "hocName": "__hoc__" // 自定义 hoc 函数名,默认 __hoc__
      }
    ]
  ]
}

部分页面排除转换

默认转换所有页面,如果部分页面不需要添加 hoc,可以通过在导出组件上添加注释 @nohoc

// @nohoc
export default HomePage;