react.js 组件之间的数据传递props

2018-06-24 00:16:56来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

/*
*属性
* 1.如何传递属性
* 2.属性和状态区别和联系
*
* 3.子组件都有一个props属性对象
*
* 4.单线数据流(只能从父组件流向子组件,就是在父组件定义一个属性,子组件可以通过this.props.属性名  接收)
* 5.子组件可以读取父组件传递的属性,但是不能直接改
* */
import React,{Component} from 'react'
import ReactDOM from 'react-dom'
//子组件
class LikeButton extends Component{
    constructor(){
        super();

    }
    render(){
        // JS引擎 V8 最多只会占用1.7G
        //onClick等于一个函数定义,而非一个函数执行结果
        //如果changeText加上(),则会直接执行,再次执行就没有结果,还会进入死循环
        // 加了(),改变状态,父组件重新渲染,子组件又会渲染,自主渲染又会修改状态,父组件又会重新渲染,这样一直死循环,直到内存消耗光了
        return(
            <button onClick={this.props.changeText}>
                {this.props.text}{this.props.age}
            </button>
        )
    }
}
/*父组件定义一个属性text*/
class Index extends Component{
    constructor(){
        super();
        //初始化状态对象
        this.state={
            text:"点赞",
            age:10
        }
    }
    changeText= ()=>{
        this.setState({
           text:this.state.text=='点赞'?'取消':'点赞'
        })
    }
    //父组件通过属性传递函数和变量值给子组件

    render(){
        return(
            <div>
                <LikeButton changeText={this.changeText} text={this.state.text} age={this.state.age}></LikeButton>
            </div>
        )
    }
}
ReactDOM.render(<Index></Index>,document.querySelector('#root'));

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript常用代码书写规范

下一篇:深入理解模块化编程