RN class xx extends Component的写法this.state区别与React.createClass()?(已解决)



  • @sunnylqm 我原来创建class的写法是官网demo的写法,即var xx = React.createClass({});然后在这个class里面可以用getInitialState()来初始化状态,但是看了 https://github.com/airbnb/javascript/tree/master/react 这里的规范以后采用了class xx extends Component{}的写法。这样一来出现了一个个问题:

    export default class MainActivity extends Component {
    
        constructor(props) {
            super(props);
            this.state = {
                page: 0,
            }
        }
    
        onSelectMenu(index) {
            if (index != this.state.page) {
                this.viewPager.setPage(index);
                this.setState({ page: index });
            };
        }
    
    
        render() {
            var pages = [];
            var pageStyle = {
                    flex: 1
                };
            pages.push(
                <View key = { 0 } style = { pageStyle } collapsable = { true }>
                    <Conv navigator = { this.props.navigator }/>
                </View>
            );
            pages.push(
                <View key = { 1 } style = { pageStyle } collapsable = { true }>
                    <Contact navigator = { this.props.navigator }/>
                </View>
            );
            pages.push(
                <View key = { 2 } style = { pageStyle } collapsable = { true }>
                    <Me navigator = { this.props.navigator } />
                </View>
            );
            return (
                <View style = { styles.container }>
                        <ViewPagerAndroid
                            style = { styles.viewPager }
                            initialPage = {0}
                            onPageSelected = { this.onPageSelected }
                            ref = { viewPager => { this.viewPager = viewPager; } }>
                            { pages }
                        </ViewPagerAndroid>
                        <Actionbar style = { styles.actionbar }
                            onselect = {this.onSelectMenu}
                            currentPage = { this.state.page }/>
                    </View>
    
            );
        }
    }
    

    上面的代码运行到if (index != this.state.page)这一行出现了错误,提示

    undefined is not an object(evaluating 'this.state.page')
    

    求高手指点迷津。


  • administrators

    所以本论坛最重要的文章之一你也没有读过是吗
    http://bbs.reactnative.cn/topic/15/react-react-native-的es5-es6写法对照表



  • @sunnylqm 呃 不好意思,之前没看。谢谢提醒



  • 事件回调发生变化了



  • 可能题主没有很多实践经验,我大概解答下。

    1.题主的这个问题和es6的关系并不大,而是和this的指向有关
    2.在onSelectMenu里面你console.dir(this),打印出来的值并不是constructor实例的this,而是对应Actionbar的所有props组成的对象值。

    解决办法: 把this.onSelectMenu改为this.onSelectMenu.bind(this)这样就好了

    另外提醒下es6还是得用的,不然会跟不上前端发展的步伐。
    还有其他问题可以参考,我写的demo组件

    知足者常乐

    0

  • administrators

    @slashhuang es5中类方法会autobind,但es6中react官方取消了这一做法,所以与es6有关。



  • @sunnylqm 谢谢指出。
    No autobinding was the decision of React team when they implemented support of ES6 classes for React components原文地址

    知足者常乐

    0

登录后回复