Listview React将getInitialState（ES5）转换为构造函数（ES6）"；列表视图）

真的需要做出本机反应，但在将getInitialState转换为构造函数时遇到了一些问题。我正在处理一个列表视图，其中我的行是可切换的。它可以与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;

---

我尝试过所有的事情，所有的事情都应该是一样的，但总是不一样。希望有人能帮忙。您已经尝试了一切。

您的问题与

getInitalState

无关。在ES6类中，React不会将您的方法绑定到

this

。因此，调用

\u renderRow

方法的上下文错误

您可以通过在

构造函数中添加以下内容来修复它

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
}

constructor（）{
超级（）
var ds=new ListView.DataSource（{rowHasChanged:（row1，row2）=>true}）
此.state={
数据源：ds.cloneWithRows（rows），
scrollEnabled:true
};
这个。_renderRow=这个。_renderRow.bind（这个）；//谢谢。非常有用
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
}