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

        )

      }

    })

    当你终于脱胎换骨,一定会感谢曾经的孤独。
  • 相关阅读:
    Java反射(2)访问字段(Field)
    《编程珠玑》中“位图排序”引发的一系列实验
    Java : 传值or传引用?
    const 指针
    三种数据库访问——Spring3.2 + Hibernate4.2
    三种数据库访问——Spring JDBC
    数据库连接池:Druid
    三种数据库访问——原生JDBC
    介绍4款json的java类库 及 其性能测试
    云存储(Swift+Keystone)部署策略
  • 原文地址:https://www.cnblogs.com/zdzx939/p/6762113.html
Copyright © 2020-2023  润新知