zoukankan      html  css  js  c++  java
  • 菜比如我的漫漫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都拿到了,那么父组件里的其他东西也就可以拿到了。

        )

      }

    })

    当你终于脱胎换骨,一定会感谢曾经的孤独。
  • 相关阅读:
    call/cc 总结 | Scheme
    用call/cc合成所有的控制流结构
    词法作用域 vs 动态作用域
    数论部分第二节:埃拉托斯特尼筛法
    1022: [SHOI2008]小约翰的游戏John【Nim博弈,新生必做的水题】
    C++面向对象作业1
    数论部分第一节:素数与素性测试【详解】
    基数排序与桶排序,计数排序【详解】
    计蒜客:百度的科学计算器(简单)【python神解】
    优质免费在线学习网站【自用】
  • 原文地址:https://www.cnblogs.com/zdzx939/p/6762113.html
Copyright © 2011-2022 走看看