Это больше не связано при использовании стрелочных функций после обновления до React Native 26.

В моем проекте 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 также запустите:

  • сторож
  • запуск npm --reset-кеш
  • Я также редактирую файл (добавляю комментарий), чтобы убедиться, что он перекомпилируется.

Примечание: забавно, что это работает даже с .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"
  ]
}

введите здесь описание изображения


react-native babeljs relayjs
person Nick Siderakis    schedule 26.05.2016    source источник
comment
У вас есть пример кода, который мы могли бы посмотреть? Можете ли вы воспроизвести проблему, например, на babeljs.io/repl?   -  person loganfsmyth    schedule 26.05.2016
comment
Добавлен пример. Я почти уверен, что что-то в моем package.json или .babelrc вызывает проблему.   -  person Nick Siderakis    schedule 26.05.2016
comment
добавление .babelrc определенно является проблемой, но не уверен, что это решение.   -  person Nick Siderakis    schedule 26.05.2016

Ответы (2)


arrow_upward
3
arrow_downward

У меня была эта проблема, но я уверен, что она появилась еще до 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"]
    }
}
}
person emrosenf    schedule 27.05.2016

arrow_upward
1
arrow_downward

Не уверен, что это действительно связано с 26, у меня была такая же проблема с 25. См. Мой пост здесь: Неработающая автопривязка в стрелочной функции для модулей узлов, на которые ссылаются, при использовании react-native с react-relay

Для меня проблема не постоянная, и после того, как я немного поработал с ней, она исчезла навсегда. По-видимому, за меня это сделал react-native-stage-0. При очистке кеша единственное, что вы не сделали, это очистили $TMPDIR следующим образом: rm -rf $TMPDIR/react-*

Я попытался воспроизвести свою проблему с примером проекта, но не смог, я бы попытался также rm -rf node_modules, просто чтобы быть уверенным.

person Matthias M.    schedule 26.05.2016
comment
Спасибо! Я обновился до RN26 с RN24, так что, вероятно, он был представлен в RN25. Добавление фиксированных стрелочных функций react-native-stage-0, но из реле. Удалось ли вам совместить функции стрелок и реле? Можете ли вы опубликовать весь свой .babrc. - person Nick Siderakis; 26.05.2016
comment
Да, это работает: { "sourceMaps": "inline", "presets": [ "./plugins/babelRelayPlugin", "react-native-stage-0" ], "passPerPreset": true } и вот плагин babelRelay: const getBabelRelayPlugin = require('babel-relay-plugin') const schema = require('../../data/schema.json') module.exports = { plugins: [getBabelRelayPlugin(schema.data, { abortOnError: true })] }; - person Matthias M.; 27.05.2016