javascript - babel-preset-react-native 和高阶组件

Question

我刚刚将一个项目从 RN 53 更新到 56，这意味着 babel 也从版本 6 更新到 7，这给我带来了一个我无法真正理解的问题。

似乎在函数内部扩展的类只保留它们扩展的类，而不保留扩展。不过，新构造函数似乎已运行。

问题是由 babel-preset-react-native@5.0.2 引起的

为了重现这个问题，我尝试生成一个小例子，我在函数中创建并返回一个类

class A {
  a() {
    return 'a';
  }
}

const createB = () => {
  class B extends A {
    constructor() {
      super();
      this.c = 'c';
    }

    b() {
      return 'b';
    }
  }

  return B;
}

const CB = createB();

console.log('a: ', typeof new CB().a);
console.log('b: ', typeof new CB().b);
console.log('c: ', typeof new CB().c);

如果我将它作为 yarn babel-node --presets=react-native index.js new CB().b 永远不会被定义

a:  function
b:  undefined
c:  string

如果我改为在没有预设或 @babel/preset-env 的情况下运行它，它会按照我的预期运行。

a:  function
b:  function
c:  string

谁遇到过类似的问题？我可以通过加载 react-native 然后加载 @babel/preset-env 来解决它，但这会导致使用类属性的模块出现一些其他问题，这意味着我需要@babel/preset-env 在 react-native

之前

package.json

{
  "name": "err",
  "version": "1.0.0",
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.55",
    "@babel/core": "^7.0.0-beta.55",
    "@babel/node": "^7.0.0-beta.55",
    "@babel/preset-env": "^7.0.0-beta.55",
    "babel-preset-react-native": "^5.0.2"
  }
}

Answer 1

我在升级到 RN 56 和 babel-preset-react-native 5.02 时遇到了类似的问题，然后我将 babel-preset-react-native 切换回 5.0.0，一切正常。