升级到 React Native 26 后使用箭头函数时不再绑定

Question

在我的项目中，this 在升级到 React Native 26 后使用箭头函数时不再绑定。

如果我在下面的示例中不使用.babelrc，它可以与箭头函数一起使用。添加 .babelrc 时，箭头功能不再起作用。

.babelrc

{ "passPerPreset": true, "presets": [ {"plugins":["../schema/babelRelayPlugin"]}, "react-native", ] }

我也试过了：

{ "passPerPreset": true, "presets": [ {"plugins":["../schema/babelRelayPlugin"]}, "react-native-stage-0", ] } 和

{ "passPerPreset": true, "presets": [ {"plugins":["../schema/babelRelayPlugin"]}, "react-native", {"plugins":["transform-es2015-arrow-functions"]}, ] }

---

这个错误

class NoArrow extends Component {
  constructor(){
    super();
    this.state={x:0};
  }

  inc = ()=>{
    this.setState({x:this.state.x+1});
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={this.inc}>
          Welcome to React Native! {this.state.x}
        </Text>

      </View>
    );
  }
}

这行得通

class NoArrow extends Component {
  constructor(){
    super();
    this.state={x:0};
    this.inc=this.inc.bind(this);
  }

  inc(){
    this.setState({x:this.state.x+1});
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={this.inc}>
          Welcome to React Native! {this.state.x}
        </Text>

      </View>
    );
  }
}

在添加/删除.babelrc时也运行：

• watchman watch-del-all
• npm start --reset-cache
• 我还编辑文件（添加注释）以确保它重新编译。

---

旁注：有趣的是即使使用.babelrc 也可以使用

class NoArrow extends Component {
  constructor(){
    super();
    this.state={x:0};
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={()=> this.setState({x:this.state.x+1})}>
          Welcome to React Native! {this.state.x}
        </Text>

      </View>
    );
  }
}

---

---

---

更新 1

在$TMPDIR里面删除缓存文件；它有一个散列名称，例如 11acb28f1c8d3c6313ca5f8ccba3c158

使用react-native-stage-0 可能已经修复了箭头函数问题，但现在 Relay.QL 不再正确编译。

{
  "passPerPreset": true,
  "presets": [
    {"plugins":["../schema/babelRelayPlugin"]},
    "react-native-stage-0"
  ]
}

Answer 1

我遇到过这个问题，但我很确定它早于 RN 0.24。你有什么版本的 babel-core/babel-cli？我一直希望T7191 能解决这个问题，但它没有。

我最终做的是使用babel-relay-plugin-loader。我不再使用 passPerPreset，它一直在可靠地工作，虽然我不完全理解如何。

这是我的 .babelrc 现在的样子：

{
"presets": [
    "react-native"
],
"plugins": [
    "babel-relay-plugin-loader"
],
"env": {
    "web": {
        "presets": ["es2015", "stage-0", "react"],
        "plugins": ["babel-relay-plugin-loader"]
    }
}
}

Answer 2

不确定这是否真的与 26 有关，我对 25 也有同样的问题。 在这里查看我的帖子： Broken autobinding in arrow function for referenced node modules when using react-native with react-relay

对我来说，这个问题并不持久，经过一段时间的修补后，它已经一去不复返了。似乎 react-native-stage-0 为我做到了。 清除缓存时，您唯一没有做的就是像这样清除 $TMPDIR：rm -rf $TMPDIR/react-*

我已尝试使用示例项目重现我的问题，但无法重现，我会尝试 rm -rf node_modules 以确保。