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 (
            <div>
                <ClickCount name="first"/>
                <ClickCount name="second"/>
                <ClickCount name="third"/>
            </div>
        )
    }
}

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 (
            <div>
                <button onClick={this.onClickButton}>Click me </button>
                <div style={{display:"inline"}}>
                    {name}Click Count:{this.state.count}
                </div>
            </div>
        )
    }
}

export default ClickCount;

运行结果 运行结果.png