React-native (ES5) to (ES6)

Этот ES6 дает некоторые проблемы в React native. Я хочу написать код в чистом ES6, но запись части дает ошибки.React-native (ES5) to (ES6)

ES5 код

renderScene: function (route, navigator) { 
     var Component = route.component; 
     return (
      <Component openModal={() => this.setState({modal: true})}/> 
     ) 
    },

Где ES6 является:

renderScene(route, navigator) { 
    var Component = route.component; 
    return (
     <Component openModal={() => this.setState({modal: true}) }/> 
    ) 
}

Я получаю эту ошибку:

Я попытался добавить привязку (это), но он не работает.

Может ли кто-нибудь помочь? Thx заранее

EDIT: Добавлен полный код класса

class Navigation extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      modal: false, 
     } 
    } 

    renderScene(route, navigator) { 
     var Component = route.component; 
     return (
      <Component openModal={() => this.setState({modal: true}) }/> 
     ) 
    } 

    goToOtherRoute() { 
     //this.refs.navigator.push({newRoute}) 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       <Navigator 
        ref="navigator" 
        initialRoute={RouteStack.app} 
        renderScene={this.renderScene} 
       /> 
       {this.state.modal ? <Basket goToOtherRoute={this.goToOtherRoute} closeModal={() => this.setState({modal: false}) }/> : null } 
      </View> 
     ); 
    } 
}

источник

2016-04-21 MDK

Можете ли вы опубликовать весь класс? – nils

Вы изменили с 'React.createClass' на' class extends Component'? – azium

У меня есть [аналогичная проблема] (http://stackoverflow.com/questions/36777607/how-to-access-this-inside-a-renderrow-of-a-listview). Кажется, что 'this' не является экземпляром Navigation. Вы можете использовать console.log (this) внутри 'render' и сравнить его с console.log (this) внутри' renderScene' – xabitrigo

Declare renderScene так:

renderScene = (route, navigator) => { 
    //code 
}

Есть другие варианты, I'v e записал их here.

источник

2016-04-21 20:16:21 xabitrigo

Ничего себе это сработало. Спасибо. Прочитали ваше сообщение по другой ссылке. Как получилось, что два других варианта не работают, и объясните, что это значит, когда вы объявляете метод, подобный этому. – MDK

Эти три варианта должны работать (я только что проверил три в моем проекте). Насколько я знаю, синтаксис стрелки - это [Babel] (https://babeljs.io/) на работе. Основное различие заключается в том, что Бабель, кажется, связывает «это» с вызываемой функцией, тогда как в двух других методах вам нужно сделать привязку самостоятельно. Использование 'renderScene = {this.renderScene.bind (this)}' inside' render() 'или запись' this.renderScene = this.renderScene.bind (this) 'после' super (props) 'также должно работать. – xabitrigo

Я на самом деле. Дело в том, что я был привязан (это) к неправильному месту, поэтому поэтому он не работал. Возьми последний вопрос. Вы объясните, пожалуйста, {this.state.modal? MDK

Конечно здесь это: И да к распространяется компонента

class Navigation extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      modal: false, 
     } 
    } 

    renderScene(route, navigator) { 
     var Component = route.component; 
     return (
      <Component openModal={() => this.setState({modal: true}) }/> 
     ) 
    } 

    goToOtherRoute() { 
     //this.refs.navigator.push({newRoute}) 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       <Navigator 
        ref="navigator" 
        initialRoute={RouteStack.app} 
        renderScene={this.renderScene} 
       /> 
       {this.state.modal ? <Basket goToOtherRoute={this.goToOtherRoute} closeModal={() => this.setState({modal: false}) }/> : null } 
      </View> 
     ); 
    } 
}

источник

2016-04-21 19:20:59 MDK

React-native (ES5) to (ES6)

ответ

Смежные вопросы