继承Page报错：xxx is undefined

[imageslr]

问题描述
希望创建两个一模一样的页面，因此使用其中一个页面继承另一个页面，但是编译后小程序内报错。报错信息是：BasePage is undefined.

复现步骤

// index.jsx 这个页面是基类
import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";

export default class Cart extends Component {
  config = {
    navigationBarTitleText: "购物车"
  };

  state = {};

  componentWillMount() {}

  render() {
    return <View />;
  }
}

// _index.jsx
import Taro, { Component } from "@tarojs/taro";
import Cart from "./index";

export default class Index extends Cart {}

期望行为
/pages/_index.jsx页面展示“购物车”页面内容

报错信息
thirdScriptError
sdk uncaught third Error
Cart is not defined
ReferenceError: Cart is not defined
at http://127.0.0.1:23087/appservice/pages/cart/_index.js:49:3
at require (http://127.0.0.1:23087/appservice/__dev__/WAService.js:1:1001939)
at :293:7
at HTMLScriptElement.scriptLoaded (http://127.0.0.1:23087/appservice/appservice?t=1554983910085:3055:21)
at HTMLScriptElement.script.onload (http://127.0.0.1:23087/appservice/appservice?t=1554983910085:3067:20)

系统信息
👽 Taro v1.2.20

Taro CLI 1.2.20 environment info:
System:
OS: macOS 10.14.3
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.2 - /usr/local/opt/node@8/bin/node
Yarn: yarn install v0.27.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 0.18s. - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/opt/node@8/bin/npm
npmGlobalPackages:
typescript: 3.3.3333

附加信息
也遇到过和#2511 一模一样的问题，同样不知道如何解决

#2511 中，开发者说可以继承Page，但是#2526 中说，render函数目前无法继承。请问哪个正确呢？

补充一下，我的需求是想做一个购物车页面，这个是个tabbar页面，在非tabbar页面中跳转过去的话页面栈就清空了。我希望像京东小程序那样，购物车可以是tabbar页面，也可以作为一个单独的页面。因此就想继承Page。不过现在遇到了这个问题。谢谢您解答。

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[taro-bot]

CC @luckyadam

[luckyadam]

子类不要为空，至少有个 render 方法

[imageslr]

@luckyadam 子类一开始加了render()方法后是可以编译通过的，但是现在又无法通过了，还是报同样的undefined错误，不知道是哪里出问题：

// 基类
import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";

export default class Cart extends Component {
  config = {
    navigationBarTitleText: ""
  };

  state = {};

  componentWillMount() {}

  componentDidMount() {}

  render() {
    return <View>123</View>;
  }
}




// 子类
import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";
import Cart from "./index";

export default class CartPage extends Cart {
  componentWillMount() {}

  componentDidMount() {}

  render() {
    return <View>123</View>;
  }
}

[imageslr]

调试了一下发现，如果两个页面同时在/app.js的pages数组中时，就会报上图的错误：

如果将基类pages/cart/index注释掉，就不会报错undefined了。注释掉以后，我是否相当于继承了一个组件？意思是组件可以被页面继承，而页面就不行？

[imageslr]

目前实现两个一模一样的页面的解决办法是：新建一个基类base.js，把它当成组件用，两个页面的render方法都是return <Base />。这样重复写的代码最少。

也可以不用新建基类，直接将两个页面的其中之一作为组件，在render方法中返回。这样也能编译通过，控制台报错错误 组件引用 文件./index-page已经在 app.js 中被指定为页面，不能再作为组件来引用！并不影响。

// 页面1 index-tabbar.js
import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";

export default class Cart extends Component {
  config = {
    navigationBarTitleText: "购物车"
  };

  render() {
    return <View>页面1</View>;
  }
}

// 页面2
import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";
import Cart from "./index-tabbar";

export default class CartPage extends Component {
  render() {
    return <Cart />;
  }
}

如果是用继承的方式：export default class CartPage extends Cart，就会报错，无法编译了。