getInitialState（ES5）からコンストラクター（ES6） "ListView）

Question

getInitialStateをコンストラクターに変換するときに実際にReact-nativeになりますが、いくつかの問題が発生します。 getInitialStateとではなく、コンストラクタと

変換されたコード：

'use strict'; 

var React = require('react-native'); 
var { 
    StyleSheet, 
    ListView, 
    Text, 
    View, 
} = React; 

var styles = StyleSheet.create({ 
    container: { 
     backgroundColor: '#f2f2f2', 
     flex: 1, 
    }, 
    listview: { 
     flex: 1, 
    }, 
    li: { 
     backgroundColor: '#fff', 
     borderBottomColor: '#eee', 
     borderColor: 'transparent', 
     borderWidth: 1, 
     paddingLeft: 16, 
     paddingTop: 14, 
     paddingBottom: 16, 
    }, 
    liText: { 
     color: '#333', 
     fontSize: 16, 
    }, 
    statusbar: { 
     backgroundColor: '#fff', 
     height: 22, 
    } 
}) 

var btnsTypes = [ 
    {text: 'Primary', type: 'primary',}, 
    {text: 'Secondary', type: 'secondary',}, 
    {text: 'Delete', type: 'delete',} 
] 


var rows = [ 
    { 
     text: "Buttons swipe left", 
     right: btnsTypes, 
    }, 
    { 
     text: "Buttons swipe left", 
     right: btnsTypes, 
    } 
] 

// include react-native-swipeout 
var Swipeout = require('react-native-swipeout') 


// example swipout app 
class swipeoutExample extends React.Component { 

    constructor(){ 
     super() 
     var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => true}) 

     this.state = { 
      dataSource: ds.cloneWithRows(rows), 
      scrollEnabled: true 
     }; 
    } 


// set scrolling to true/false 
    _allowScroll (scrollEnabled) { 
     this.setState({ scrollEnabled: scrollEnabled }) 
    } 

// set active swipeout item 
    _handleSwipeout (rowID) { 
     for (var i = 0; i < rows.length; i++) { 
      console.log(rowID) 
      if (i != rowID) rows[i].active = false 
      else rows[i].active = true 
     } 
     this._updateDataSource(rows) 
    } 

    _updateDataSource (data) { 
     this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(data) 
     }) 
    } 

    _renderRow (rowData: string, sectionID: number, rowID: number) { 
     return <Swipeout 
      left={rowData.left} 
      right={rowData.right} 
      rowID={rowID} 
      sectionID={sectionID} 
      autoClose={rowData.autoClose} 
      backgroundColor={rowData.backgroundColor} 
      close={!rowData.active} 
      onOpen={(sectionID, rowID) => this._handleSwipeout(rowID)} 
      scroll={event => this._allowScroll(event)}> 
      <View style={styles.li}> 
       <Text style={styles.liText}>{rowData.text}</Text> 
      </View> 
     </Swipeout> 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       <View style={styles.statusbar}/> 
       <ListView 
        scrollEnabled={this.state.scrollEnabled} 
        dataSource={this.state.dataSource} 
        renderRow={this._renderRow} 
        style={styles.listview}/> 
      </View> 
     ) 
    } 
} 

module.exports = swipeoutExample; 

エラーメッセージ：

作品

getInitialState：私はすべてのもの、すべてを試してみました

var swipeoutExample = React.createClass({ 
    getInitialState: function() { 
     // datasource rerendered when change is made (used to set  swipeout to active) 
     var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => true}) 

     return { 
      dataSource: ds.cloneWithRows(rows), 
      scrollEnabled: true 
     } 
    } 

は同じでなければなりませんが、いつものようにそれがイマイチ。誰もが助けることを願っています。すべてを試しました。

Answer 1

問題はgetInitalStateとは関係ありません。物事はES6クラスにあります反応はあなたのメソッドをthisにバインドしません。だからあなたの_renderRowメソッドが間違ったコンテキストで呼び出されます。

あなたはconstructor

constructor() { 
    super() 
    var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => true}) 
    this.state = { 
     dataSource: ds.cloneWithRows(rows), 
     scrollEnabled: true 
    }; 

    this._renderRow = this._renderRow.bind(this); // <- now your method always save context of this class 
}