菜比如我的漫漫react学习路(二)

基础部分学差不多了,说说state和props

state:

class listData extends React.Component{

  //es6 的 语法,详情请出门右转看ES6

  constructor(...props){
    super(...props)
     }

  //也就这个state这个没有用react自己的getInitialState

  this.state = {

    testState:1

  }

  //其他的react生命周期照样可以使用,不过,注意没有逗号~

  componentDidMount(){

    //code balabala

  }

  changeState(){

    this.setState({

      testState: ++ this.state.testState

    },()=>{//这个是setState的第二个参数,也就是一个function,就是一个回调函数,在state修改完之后,你想做的事情就可以放在这里

      console.log(this.state.testState)

    })

  }

  render(){

    return(

      <div onClick = {this.changeState.bind(this)}>测试那么一下</div>

    )  

  }

}

现在来说说props

除去redux里的,我现在用到的props,都是在父子组件之间传值

let Parent = React.createClass({

  getInitialState({

    return{

      tabIndex:1

    }

  }),

  render(){

    return(

      <div>

        <Child parent = {this}/>//把需要传给子组件的东西放在这里,可以直接把父组件的this传给子组件

      </div>

    )

  }

})

let Child = React.createClass({

  render(){

    return(

      <div>{this.props.parent.state.tabIndex}</div>  //this.props.parent取到的就是父组件传过来的this,父组件的this都拿到了,那么父组件里的其他东西也就可以拿到了。

    )

  }

})

当你终于脱胎换骨,一定会感谢曾经的孤独。
原文地址:https://www.cnblogs.com/zdzx939/p/6762113.html