Getting started with React and passing values between components

       Recently, there is a very popular front-end framework-React, which has attracted much attention. Its predecessor was an internal project of FaceBook, and it was finally improved and open sourced, with huge contributions and tribute. In addition, domestic Taobao open sourced ant design based on react, and the credit is not small. For details, please refer to the official website of Ant Design: https://ant.design/docs/react/introduce . Straight to the topic, the following is a brief introduction to it based on personal experience and some information on the Internet. Hope it helps beginners.

First, the mutual value transfer between components

1. Child components pass values ​​to parent components

 

//Subassembly
var ChildComment = React.createClass({
	getInitialState: function () {
       return {count:0};
    },
	//click to pass value to parent component
	sendTimes: function () {
		var newCount = this.state.count + 1;
		this.setState({ count:newCount });
		// call the parent component's method through props
		this.props.getClickCount(newCount);
	},
   render: function () {
	   return (
			<button  onClick={this.sendTimes}>{this.props.buttonName}</button>
	   );
   }
});

//parent component
var ParentComponent = React.createClass({
	getInitialState: function () {
		return {sendCount:0};
	},
	getClickCount: function (newCount) {
		this.setState({sendCount:newCount});
	},
	render: function () {
		return (
			<div>
				<ChildComment getClickCount={this.getClickCount} buttonName="Click me for a surprise"/>
				<p>
					Clicked {this.state.sendCount} times!
				</p>
			</div>
		);
	}
});

 
2. Parent component passes value to child component

//parent component
var ParentComponent = React.createClass({
        getInitialState: function () {
            return {sendCount:0};
        },
        / / Call the method of the child component through refs
        sendTimes: function () {
            this.refs.getCountButton.sendCountFunc();
        },
        getSendCount: function () {
            / / Call the properties of the child component through refs
            this.setState({sendCount:this.refs.getCountButton.state.count + 1});
        },
        render: function () {
            return (
                <div>
                    //Define the ref attribute and the value must be unique
                    <ChildComment ref="getCountButton" getSendCount={this.getSendCount} buttonName="Click me for a surprise"/>
                    <button onClick={this.sendTimes}>The parent component calls the child component</button>
                    <p>
                        Clicked {this.state.sendCount} times!
                    </p>
                </div>
            );
        }
});

//Subassembly
var ChildComment = React.createClass({
		getInitialState: function () {
            return {count:0};
        },
        //click to call
        sendCountFunc: function () {
            var newCount = this.state.count + 1;
            this.setState({ count:newCount });
            // call the parent component's method through props
            this.props.getSendCount(newCount );
        },
       render: function () {
           return (
                <button  onClick={this.sendCountFunc}>{this.props.buttonName}</button>
           );
       }
});

 2. Passing parameters similar to the get method        In JS, we often use the get method to pass parameters, such as: http://www.baidu.com?param=123&type=3, and can also pass values ​​in the same way in react, then how to get the receiving page value? look down:

let query = this.props.location.query;
let param= query.param;
let type = query.type;

 
       As above, the passed parameters can be taken out. React also has some basic applications, which will be introduced later.