react prop传递

react中的prop为组件的对外接口，外部世界通过prop与组件进行交互。下面根据prop的赋值与取值过程了解prop的传递。

1. 给prop赋值：
   在父组件ControlPanel中给子组件ClickCount的name属性赋值，与给html标签属性赋值类似。这样，ClickCount组件就拥有了名为"name"的属性。

import React, { Component } from 'react'
import ClickCount from './ClickCount'
class ControlPanel extends Component {
    render() {
        return (
            

                
                
                
            
        )
    }
}

export default ControlPanel;

2. 读取prop值
   子组件ClickCount需要接收父组件ControlPanel传入的prop值，在构造函数中可以使用props获取ClickCount的属性对象，在其他函数中使用this.props获取该组件的属性对象。

import React, { Component } from 'react'
class ClickCount extends Component {
    constructor( props ){
        super(props)
        this.onClickButton = this.onClickButton.bind(this)
        this.state = {count:0};
        console.log(props)  //constructor内部直接通过props读取
    }

    onClickButton(){
        this.setState({count:this.state.count+1})
        console.log(this.props) //其他函数中用this.props读取
    }
    render() {
        console.log(this.props)  //其他函数中用this.props读取
        const {name}=this.props;
        return (
            

                Click me 
                

                    {name}Click Count:{this.state.count}
                
            
        )
    }
}

export default ClickCount;

运行结果

运行结果.png